Nadando em Dinheiro com jQuery

Nadando em Nadando em Dinheiro com Dinheiro com

AJAX e jQueryAJAX e jQuery

$('#reinaldo-junior')$('#reinaldo-junior')

● ~7 anos no PHP

● Fundador do phpBB.com.br (atual Suporte phpBB)

● Desenvolvimento e Treinamento

● Palestrante em eventos capixabas de Software Livre

● Entusiasta WEB

O que vamos fazer hoje Cérebro?O que vamos fazer hoje Cérebro?

● Apresentar jQuery

● DOM Scripting

● AJAX

● Hijax

● Técnicas e Boas práticas

● PHP (sim, eu sei onde estou)

● … e Dominar o Mundo!

Regras do JogoRegras do Jogo

● Tem uma Pergunta Rápida?● Pergunte na hora

● Tem uma Pergunta Demorada?● Pergunte depois (no intervalo, por email, etc)

● Está boiando (Tem uma Pergunta Idiota)?● Fique quieto, preste atenção e aprenda

● Não gostou das piadas?● Espera a palestra do Leonardo...

AJAXAJAX

● Apresentação baseada em padrões (XHTML/CSS)

● Exibição e interação dinâmicas (DOM)

● Troca e manipulação de dados (XML/XSLT/JSON)

● Recuperação de dados assíncrona (XMLHttpRequest)

● e JavaScript ligando tudo junto!

Jesse James Garrett,“Ajax: A New Approach to Web Applications” Fev/2005

AJAX como Arquitetura

Então...Então...

● AJAX N-A-O-~ é● Time de futebol● Produto de limpeza● Linguagem de

programação● DHTML, JavaScript ou

outra “coisa pra fazer site”

● jQuery, Prototype.js, Ext.js, Mootools

● AJAX É● Paradigma● Arquitetura● Técnica● JavaScript + CSS + DOM

Scripting● Maior Interação● Menos tempo para

resposta

j-What?j-What?

jQuery é uma biblioteca com foco na interação entre JavaScript e HTML.

Lançada em 2006 por John Resig, evangelista de JavaScript da Mozilla

“jQuery é projetada para mudar a maneira que você escreve JavaScript.”

jQuery.com

20082007

Porque jQuery?Porque jQuery?

● Facilidade e Popularidade

● Comunidade e Plugins

● Filosofia “Write Less, Do More”

● Chaining (Wikipedia, Method Chaining)

● DSL (Domain Specific Language)

● “DOM Oriented-Programming” e JavaScript Não-Obtrusivo

● Free e OpenSource

● ASP.NET AJAX (VS 2008 e VS 2010)

● Nokia Web-Run-Time

● Diversos livros (até um em português)

“Eu sou jQuery!”Paris Hilton

Contando VantagemContando Vantagem

http://is.gd/sQCx

Estado atualEstado atual

● jQuery 1.3

● Sizzle (engine seletor)

● Performance

● Delegação de Eventos

Tem que ter o DOMTem que ter o DOMDOM – Modelo de Objetos de Documentos

Padrão e API para consultar, navegar e manipular elementos de um documento.

Toda a biblioteca é orientada ao DOM.

O propósito principal é fornecer uma maneira fácil para separar “comportamento” do conteúdo.

Para isso, jQuery fornece uma API para o DOM intuitiva e cross-browser.

<html>

<head>

<title>My title</title>

</head>

<body>

<a href=”link.html”>My link</a>

<h1>My header</h1>

</body>

</html>

Let's Rock 'n RollLet's Rock 'n Roll

Quem quer dinheiro?Quem quer dinheiro?

$ = jQuery

● jQuery( seletor [, contexto] )

● jQuery( html )

● jQuery( fn )

● jQuery( objeto )

Todas retornam um objeto jQuery!

““Workshopping”Workshopping”

● O que?● Demonstrar um framework simples para uso de AJAX

com PHP para fornecer melhoria progressiva com degradação graciosa

● Como?● Utilizar AJAX no CRUD● Utilizar AJAX na paginação● Adicionar validação (utilizando um plugin)● Hijax (http://domscripting.com/presentations/xtech2006/)

Estudo de CasoEstudo de Caso

Mozilla Addonshttps://addons.mozilla.org/pt-BR/firefox/

$('#reinaldo').trigger('Obrigado')$('#reinaldo').trigger('Obrigado')

(Eu prefiro NADAR em Dinheiro!)

… … OUOU

$('#auditorio').find('.ouvintes')

.filter(':dormindo').trigger('acorda').end()

.filter(':acordado').find(':not(.boiando)').trigger('aplausos').each(function(){

$('#reinaldo').agradece(this);});

Any Questions?Any Questions?

Reinaldo Juniorreinaldojunior.net/palestras (www)

@ReinaldoJunior (twitter)

Nadando em Dinheiro com jQuery

Technology

Transcript of Nadando em Dinheiro com jQuery