JavaScript ninja com jQuery

Reinaldo Junior

http://reinaldojunior.net

(ou ao menos ouviu falar?)

Todo mundo construía seus layout com tabelas.

Camadas de conteúdo e apresentação juntas. Pouca flexibilidade, baixa performance e

desorganização. Mas, era bonito e produtivo

Separando a apresentação do conteúdo. Menor footprint Maior rapidez e clareza Maior organização leva à produtividade Acessibilidade (universalidade) Um passo inicial para Web Standards e

Marcação Semântica. Mas nem tudo foi perfeito...

Programação Client-Side, controle dos diferentes navegadores/SO’s e do fluxo de navegação.

Camadas de comportamento e conteúdo juntas.

Imaturidade, baixa confiabilidade, falta de profissionais e ferramentas, diferentes implementações (proprietárias).

Anatomia de um Ogro (ou JS Obtrusivo)

•Não acessível•Destrutivo•Irritante•Assustador•Obtrusivo

Obtrusive“1. Sticking out; protruding. 2. Noticeable;

prominent, especially in a displeasing way. 3. Pushy. ”

Obtrusivo“Um ogro deitado no meio do caminho,

pronto pra criar confusão”

<a href="javascript:abreNoticia(123);">Ler notícia</a>

<a href=“#“ onclick=“abreNoticia(123);”>Ler notícia</a>

<a href=“noticia.php?id=123“ onclick=“abreLink(this.href);”>Ler notícia</a>

“Na história Japonesa, um ninja (忍者, ninja) é um guerreiro, treinado em artes marciais, especializadoem uma varidade de artes de guerra não-ortodoxas. Os métodos utilizados pelos ninjas incluemassassinato, espionagem, furtividade, camuflagem, armas especializadas e um vasta coleção de artesmarciais.”

Wikipédia (http://en.wikipedia.org/wiki/Ninja)

“Os Japoneses desenvolveram as artes Ninja ao extremo, criando assassinos mortais, que podem entrar em qualquer lugar sem serem notados e agir quando menos esperado.”

The Illuminated Lantern (http://www.illuminatedlantern.com/cinema/archives/ninja.php)

Anatomia de um Ninja (ou JS Não-obtrusivo)

•Acessível•Degradativo•Funcional•Belo

Não-Obtrusivo“1. Not noticeable or

blatant; inconspicuous”

“Um ninja que chegasorrateiramente, quaseimperceptível e faz seutrabalho”

Boas práticas e padrões Separar o comportamento do conteúdo Melhorar funcionalidade, não impor Degradação Graciosa AJAX DOM Scripting Cross-Browser Scripting Delegação (e não Manipulação) de Eventos

Temporada de caça aos Ogros

(Jiraya, Tartaruga Ninja, Ninja Gaiden, Sub-zero ou Naruto – você escolhe)

Fornecem facilidades para JS Não-Obtrusivo Possuem geralmente as mesmas

funcionalidades. Abordagens/filosofias/focos diferentes Exemplos: Prototype, MooTools, extjs, YUI,

GWT, Dojo, jQuery, Rico, Spry

Filosofia: “write less, do more” Intuitividade Praticidade Acorrentamento Licensa MIT e GPL Se Microsoft e Nokia podem, porque eu não? Google, Mozilla, IBM, Dell, BBC, Digg,

Amazon, Sourceforge, Wordpress, Drupal...

(chega de papo e vamos ao que interessa!)

jQuery (1.2.6) Firefox Firebug

FirePHP Web Developer Toolbar Opera, Safari e... Internet Explorer

Básicos Hierárquicos Avançados

Filtros

Formulários

Filhos

* elemento .classe #id seletor1, seletor2, seletor3

* {border: 1px solid red}

input {padding: 3px;}

.alinhadoEspecial {margin-left: 50px;}

#menuNavegacao {width: 300px;}

h1, h2, .titulos, #tituloHome {font-family: Tahoma;}

h1#primeiro.discreto { text-transform: lowercase; }

ancestral descendente (dentro de...)

pai > filho (imediatamente dentro de...)

anterior + próximo (imediatamente depois de...)

anterior ~ irmãos (depois de...) – CSS3

#conteudo p {font-family: Arial;}

body > div {margin-left: 200px;}

label + input {border: 1px dotted red;}

h2.discreto ~ a {text-decoration:none;}

:first / :last :eq(índice) / :not(seletor) / :even / :odd :lt(índice) / :gt(indice) [atributo] / [atributo=valor] / [att1][att2]

table:first { border: 1px solid blue; }

table *:not(tr) { padding: 5px; }

table.zebra td:even { background: black; }

#navegacao li:lt(3) { color: blue; }

input[name][type=text] { color: red; }

:input :text / :password / :hidden :button / :submit / :reset :radio / :checkbox :enabled / :disabled :checked / :selected

:input { border: 1px dotted yellow; }

form :radio { margin-left: 5px; }

:checkbox:checked { text-decoration: line-through; }

:nth-child( ... ) :first-child :last-child :only-child

ul li:nth-child(3){text-decoration: overline;}

table tr:first-child { background: yellow; }

tr td:last-child { backgound: red; }

div:only-child { width: auto; }

jQuery

jQuery( seletor, *contexto )

jQuery( html )

jQuery( elementos )

jQuery( callback )

each( callback ) get( *índice )

Métodos de “Traversing” (ou “aproximando-se sorrateiramente”)

Encontrando quem você procura

add( seletor )

not( seletor )

filter( seletor / função )

eq( índice )

hasClass( classe )

is( seletor )

andSelf() / end()

Indo até quem você procura

parent( *seletor ) / parents( *seletor )

children( *seletor )

siblings( *seletor )

prev( *seletor )

next( *seletor )

prevAll( *seletor )

Métodos de “Attributes” (ou “caindo na mão”)

attr( nome, *valor ) / attr( propriedades ) removeAttr( nome ) addClass( classe ) / removeClass (classe ) css( nome, *valor ) / css( propriedades ) height( *valor ) / width( *valor ) html( *valor ) text( *valor ) val( *valor )

Métodos de “Manipulation” (ou “causando um estrago maior”)

append[To]( conteúdo ) prepend[To]( conteúdo ) [insert]after( conteúdo ) [insert]before( conteúdo ) wrap[Inner/All]( html/elemento ) replace[With/All]( conteúdo/seletor ) empty() remove( seletor ) clone( [copiar-eventos] )

Métodos de “Events” (ou “esperando a hora de dar o troco”)

bind( tipo, *dados, função ) unbind( *tipo, *função ) one( tipo, *dados, função ) trigger( tipo, *dados ) triggerHandler( tipo, *dados )

focus( *função ) , blur( *função ) click( *função ), dblclick( *função ) keydown( *função ), keyup( *função ) keypress( *função ) select( *função ) change( *função ) error( *função ) submit( *função )

load( função ), unload( função ) scroll( função ), resize( função ) mousedown( função ), mouseup( função ) mousemove( função ) mouseover( função ), mouseout( função ) hover( entra, sai ) toggle( uma, outra )

Métodos de “Effetcs” (ou “fazendo a mágica acontecer”)

show/hide( *speed,*função ) toggle() slide[Up/Down]( *speed, [*função ) slideToggle( *speed, *função ) fade[In/Out]( *speed, *função ) slideTo ( speed, opacidade, *função )

Métodos de “AJAX” (ou “invocando a irmandade secreta”)

load(url, *dados, *callback) $.post(url, *dados, *callback) $.get(url, *dados, *callback) $.getJSON(url, *dados, *callback) $.getScript(url, *dados, *callback) $.ajax( opções )

Métodos de “Utilities” (ou “tornando as coisas mais fáceis”)

$.each( objeto, callback ) $.extend( alvo, obj1, obj2, ... ) $.unique( array ) $.grep( array, callback, *inverter) $.map( array, callback ) $.inArray( valor, array ) $.isFunction( variável ) $.trim( string )

Extendendo o jQuery (ou “ensinando novos truques a macacos velhos”)

Maneira simplificada de se criar plugins Abordagens

Estender a classe jQuery (métdos ou seletores)

Estender um objeto jQuery

Permite integrar funcionalidades à filosofia jQuery

Métodos

Funções utilitárias

Independentes do Documento (DOM)

jQuery.extend({

min: function(a, b){

return a < b ? a : b;

}

})

Seletores Estendem a abstração

jQuery.extend(jQuery.expr[":"], {

anamed: "a.name==undefined”,

unamed: "a.name==‘’”

});

$(‘*:anamed’) $(‘*:unamed’)

Adiciona funcionalidades que dependam do funcionamento do jQuery

jQuery.fn.extend({check: function() {

this.each(function() { this.checked = true; });},uncheck: function() {

this.each(function() { this.checked = false; });}

});

Proteja seu código Proteja o ambiente Mantenha acorrentável Mantenha intuitivo

O que é isso?

(function() {

//Seu código

})();

Que tal?

function teste() {

//Seu código

};

teste();

Qual o problema?

var externa = 0;

(function(){

externa += 10;

})();

E agora?

var externa = 0;

(function(){

externa += 10;

(function(){

externa += 10;

})();

})();

http://pt.wikipedia.org/wiki/Closure Pode causar erros Pode ser útil (macros, por exemplo)

var eventos = [‘click’, ‘focus’, ‘blur’, ...];

jQuery.each(eventos, function(i, nome){

jQuery.protype[nome] = function(fn){

return this.bind(nome, fn);

};

});

Qual o problema?

var externa = 0;

(function(){

var externa;

externa += 10;

})();

E agora?

var externa = 0;

(function(){

var externa;

externa += 10;

(function(){

externa += 10;

})();

})();

Seu código e o ambiente ficam protegidos

Seu código pode coexistir com outros códigos aleatórios do site

Seu código pode coexistir com outras cópias da sua biblioteca

Seu código pode ser utilizado em outra biblioteca

(function($){

//Suas variáveis locais

//Seu código

})(jQuery);

Lembra?

jQuery.fn.extend({

check: function() {

this.each(function() { this.checked = true; });

},

uncheck: function() {

this.each(function() { this.checked = false;

});

}

});

jQuery.fn.extend({

check: function() {

return this.each(function() {

this.checked = true; });

},

uncheck: function() {

return this.each(function() {

this.checked = false; });

}

});

jQuery UI (ou “porque uma imagem vale mais que mil palavras”)

Draggables Droppables Sortables Selectables Resizables

Accordion Datepicker Dialog Slider Tabs

Blind Clip Drop Explode Fold Puff Slide Scale Size Pulsate Bounce Highlight Shake Transfer

Se eles conseguiram, você também pode...

(Hi-Yaaaaaaaaaaa...)

Reinaldo de Souza Juniorpalestras@reinaldojunior.net

< http://reinaldojunior.net >

Dúvidas? Comentários? Reclamações? Sugestões?Piadinhas sem graça?

O-bri-ga-do