• Like
  • Save
Jquery 2
Upcoming SlideShare
Loading in...5
×
 

Jquery 2

on

  • 385 views

 

Statistics

Views

Total Views
385
Views on SlideShare
384
Embed Views
1

Actions

Likes
4
Downloads
53
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Jquery 2 Jquery 2 Presentation Transcript

    • Eduardo Mendes (edumendes@gmail.com) jQuery e CSS 1
    • Eduardo Mendes (edumendes@gmail.com)2 Separation of Concerns Descrição do Conteúdo Apresentação
 do Conteúdo Controle do
 comportamento deste Conteúdo
    • Eduardo Mendes (edumendes@gmail.com)3 jQuery e CSS .css(<attr>, <value>) $(this).css("font-size", “10px”).css(“border”, “1px solid"); .css({<attr>:<value>, <attr>:<value>,}) $(this).css({“font-size”:”10px”,”border" : "1px solid”});
    • Eduardo Mendes (edumendes@gmail.com)4 jQuery e CSS .show() $(this).css("display", “block”); .hide() $(this).css("display", “none”);
    • Eduardo Mendes (edumendes@gmail.com)5 jQuery e CSS .addClass() .removeClass() .toggleClas()
    • Eduardo Mendes (edumendes@gmail.com)6 jQuery e CSS $(this).animate({'top': '0px'}); $(this).hasClass('nomeDaClasse');
    • Eduardo Mendes (edumendes@gmail.com) Ajax Básico 7
    • Eduardo Mendes (edumendes@gmail.com)8 Revelar conteúdo
    • Eduardo Mendes (edumendes@gmail.com)9 Código sem Ajax <li class="bebida promocao" data-preco="15.00"> <h3>Lemon Breeze</h3> <p>R$ 15.00</p> <button>Veja a Receita</button> <div class="receita"> <p>Um drinks mais que … </p> <a href="#" class="expandir">Veja a bebida</a> <img src="imagens/yellow.gif"/> </div> </li> index.html $('.bebidas’).on(‘click','button', function () { $(this).closest(".bebida").find(".receita").slideDown(); }); $('.bebidas').on('click', ‘.expandir', function() { $(this).closest(".bebida").find("img").show(); }); application.js apresenta o elemento oculto quando é clicado exibe a imagem quando é clicado QUal seria a forma de apresentar este conteúdo de maneira dinâmica?
    • Eduardo Mendes (edumendes@gmail.com) $.ajax(url [, settings]) 10 url obrigatória settings configurações opcionais conjunto chave/valor que configura a requisição AJAX • success: só executa quando
 a chamada a url funciona
 corretamente executa uma requisição HTTP assíncrona
    • Eduardo Mendes (edumendes@gmail.com)11 Código sem Ajax <li class="bebida promocao" data-preco="15.00"> <h3>Lemon Breeze</h3> <p>R$ 15.00</p> <button>Veja a Receita</button> <div class="receita"> ! </div> </li> index.html $.ajax(url [, settings])
    • Eduardo Mendes (edumendes@gmail.com)12 Utilizando uma requisição AJAX $('.bebidas').on('click', 'button', function () { ! ! ! ! ! }); $.ajax('receita.html', { success: function(response) { $(’.receita').html(response).slideDown(); } }); <p>Um drinks …</p> <a href="#" class="expandir">Veja a bebida</a> <img src="imagens/yellow.gif"/> application.js receita.html só executa quando a resposta retorna com sucesso resposta, que não é uma página HMTL completa
    • Eduardo Mendes (edumendes@gmail.com) $.get(url, success) 13 url obrigatória success função a ser executada quando a resposta for retornada executa uma requisição HTTP assíncrona via HTTP GET
    • Eduardo Mendes (edumendes@gmail.com)14 Atalho com $.get $('.bebidas').on('click', 'button', function () { ! ! ! ! ! }); $.ajax('receita.html', { success: function(response) { $(’.receita').html(response).slideDown(); } }); $('.bebidas').on('click', 'button', function () { ! ! ! }); $.get('receita.html', function(response) { $(’.receita').html(response).slideDown(); }); equivalentes
    • Eduardo Mendes (edumendes@gmail.com)15 Como enviar parâmetros? $.ajax('receita.html', { success: function(response) { $(".receita").html(response).slideDown(); } }); sempre recupera o mesmo arquivo Como criar um site em que a requisição levasse em conta o ID da receita? receita.html?id=123
    • Eduardo Mendes (edumendes@gmail.com)16 Como enviar parâmetros? $.ajax(‘receita.html?id=123', { success: function(response) { $(".receita").html(response).slideDown(); } }); sempre recupera o mesmo arquivo $.ajax(‘receita.html’, { success: function(response) { $(".receita").html(response).slideDown(); }, data: {“id”: 123} });
    • Eduardo Mendes (edumendes@gmail.com)17 Como enviar parâmetros? $.ajax(‘receita.html’, { success: function(response) { $(".receita").html(response).slideDown(); }, }); <div class=“receita” data-id=“123”> data: {id: $(“.receita”).data("id") }
    • Eduardo Mendes (edumendes@gmail.com) $.ajax(url [, settings]) 18 • success: só executa quando
 a chamada a url funciona
 corretamente executa uma requisição HTTP assíncrona • error: executa quando ocorre
 um timeout, erro no servidor, 
 ou a requisição é abortada • timeout: indica em ms quanto a
 requisição deve deve esperar • beforeSend: executa antes da
 requisição ajax • complete: executa após a execução
 da requisição com sucesso ou erro
    • Eduardo Mendes (edumendes@gmail.com)19 Manipulando requisições com falha $('.bebidas').on('click', 'button', function () { $.ajax('http://www.fa7.edu.br/pos-si/receita.html', { success: function(response) { $(".receita").html(response).slideDown(); } ! ! ! }); }); , error: function(request, errorType, errorMessage) { alert('Error: ' + errorType + ', mensagem: ' + errorMessage); } • error: executa quando ocorre
 um timeout, erro no servidor, 
 ou a requisição é abortada
    • Eduardo Mendes (edumendes@gmail.com)20 Manipulando requisições com falha $('.bebidas').on('click', 'button', function () { $.ajax('http://www.fa7.edu.br/pos-si/receita.html', { success: function(response) { $(".receita").html(response).slideDown(); }, error: function(request, errorType, errorMessage) { ... }, ! ! ! ! ! ! ! ! }); }); timeout: 3000, beforeSend: function() { $(".bebidas").addClass("carregando"); } complete: function() { $(".bebidas").removeClass("carregando"); }
    • Eduardo Mendes (edumendes@gmail.com) JavaScript: Objetos 21
    • Eduardo Mendes (edumendes@gmail.com) Objetos em JavaScript Uma entidade independente com propriedades e tipo como em outras linguagens as propriedades são acessadas pela notação do ponto 22 variavel Objeto idade=10 variavelDoObjeto.nomeDaPropriedade o.idade
    • Eduardo Mendes (edumendes@gmail.com) Criando objetos 23 var carro = new Object(); ! carro.fabricante = "KIA"; carro.modelo = "Picanto"; carro.ano = 2012; carro["fabricante"] = "Volks"; carro["modelo"] = "Gol"; carro["ano"] = 2013; pode ser utilizado como um array associativo
    • Eduardo Mendes (edumendes@gmail.com) Objetos
 Literais 24 var moto = {cor: "vermelha", rodas: 4, cilindros: 4};
    • Eduardo Mendes (edumendes@gmail.com) Função
 Construtora 25 function Carro(fabricante, modelo, ano) { this.fabricante = fabricante; this.modelo = modelo; this.ano = ano; } var outroCarro = new Carro("Hyundai", "Tucson", 2009); ! var aqueleCarro = new Carro("Ford", "Fiesta", 2014);
    • Eduardo Mendes (edumendes@gmail.com) Métodos 26 var moto = {cor: "vermelha", rodas: 4, cilindros: 4}; Como foi visto os objetos são formados por propriedades
    • Eduardo Mendes (edumendes@gmail.com) Métodos 27 variavelDoObjeto.nomeDoMetodo = nome_funcao; São funções associadas a um objeto… ou é uma propriedade de um objeto
 que é uma função ! um método é uma função atribuída
 a uma propriedade do objeto var meuObjeto = { meuMetodo: function(params) { // algum comportamento } };
    • Eduardo Mendes (edumendes@gmail.com)28 Métodos function Moto(cor, rodas, cilindros) { this.cor = cor; this.rodas = rodas; this.cilindros = cilindros; ! } function exibirDados() { var resultado = "Dados da moto: cor - " + this.cor + ", rodas: " + this.rodas + ", cilindros: " + this.cilindros; alert(resultado); } this.exibirDados = exibirDados;
    • Eduardo Mendes (edumendes@gmail.com) Encapsulando comportamento jQuery em objetos 29
    • Eduardo Mendes (edumendes@gmail.com)30 Refatorando $(document).ready(function () { $(".bebidas").on('click', 'button', function () { $.ajax('receita.html', { success: function(response) { $(".receita").html(response).slideDown(); }, error: function(request, errorType, errorMessage) { alert('Error: ' + errorType + ', mensagem: ' + errorMessage); }, timeout: 3000, beforeSend: function() { $(".bebidas").find("button").addClass("carregando"); }, complete: function() { $(".bebidas").find("button").removeClass("carregando"); } }); }); ! $('.bebidas').on('click', '.expandir', function(event) { event.preventDefault(); $(".bebida").find("img").show(); }); });
    • Eduardo Mendes (edumendes@gmail.com)31 Refatorando var receita = { init: function() { //manipuladores de eventos //já existentes } }; ele vai executar toda a operação que foi feita dentro de ready $(document).ready(function () { receita.init(); } facilita o entendimento do que acontece
    • Eduardo Mendes (edumendes@gmail.com)32 Refatorando var receita = { init: function() { ! ! ! ! ! ! ! } }; $(document).ready(function () { receita.init(); } $('.bebidas').on('click', 'button', function () { $.ajax('receita.html', { ... }); }); ! $('.bebidas').on('click', '.expandir', function(event) {});
    • Eduardo Mendes (edumendes@gmail.com)33 Refatorando var receita = { init: function() { ! ! }, ! ! ! ! ! }; $(document).ready(function () { receita.init(); } $('.bebidas').on('click', 'button', function () {}); $('.bebidas').on('click', '.expandir', function(event) {…}); ! ! ! $.ajax('receita.html', { ... }); carregamentoOk: function() { ! }
    • Eduardo Mendes (edumendes@gmail.com)34 Refatorando var receita = { init: function() { ! ! }, ! ! ! ! ! }; $(document).ready(function () { receita.init(); } $('.bebidas').on('click', 'button', this.carregamentoOK); $('.bebidas').on('click', '.expandir', function(event) {…}); ! ! ! $.ajax('receita.html', { ... }); carregamentoOk: function() { ! } o mesmo pode ser feito para o carregento da imagem
    • Eduardo Mendes (edumendes@gmail.com) jQuery com Funções Construtoras 35
    • Eduardo Mendes (edumendes@gmail.com)36 Objeto Literal var receita = { init: function() { //inic. da receita } }; ! $(document).ready(function () { receita.init(); } limitada a uma única receita function Receita(sabor) { //inic. do sabor da receita ! } ! ! $(document).ready(function () { ! ! } múltiplas bebidas Função Construtora var limao = new Receita('limao'); var negro = new Rece‘ta('negro');
    • Eduardo Mendes (edumendes@gmail.com)37 Refatorando var receita = { init: function() { $('.bebidas').on('click', 'button', this.carregamentoOK); $('.bebidas').on('click', '.expandir', this.exibirImagem); }, carregamentoOk: function() {…}, exibirImagem: function() {…} }; $(document).ready(function () { receita.init(); }
    • Eduardo Mendes (edumendes@gmail.com)38 Refatorando function Receita(el) { this.el = el; //metodos auxiliares //manipuladores de eventos } um elemento jQuery que será manipulado $(document).ready(function () { var limao = new Receita($("#limao")); var negro = new Receita($("#negro")); }); executa o comportamento para cada bebida
    • Eduardo Mendes (edumendes@gmail.com)39 Refatorando function Receita(el) { this.el = el; ! ! ! ! ! } $(document).ready(function () { var limao = new Receita($("#limao")); var negro = new Receita($("#negro")); }); this.carregamentoOk = function() {...} this.exibirFoto = function(event) {...} ! this.el.on('click', 'button', this.carregamentoOk); this.el.on('click', '.expandir', this.exibirFoto); as referências dentro das funções precisarão ser revisadas
    • Eduardo Mendes (edumendes@gmail.com)40 Refatorando function Receita(el) { this.el = el; ! ! ! ! ! ! ! ! ! ! this.el.on('click', 'button', this.carregamentoOk); this.el.on('click', '.expandir', this.exibirFoto); } atingirá qualquer elemento de classe receitathis.carregamentoOk = function() { $.ajax('receita.html', { timeout: 3000, success: function(response) { $('.receita').html(response).slideDown(); } });
    • Eduardo Mendes (edumendes@gmail.com)41 Refatorando function Receita(el) { this.el = el; ! ! ! ! ! ! ! ! ! this.el.on('click', 'button', this.carregamentoOk); this.el.on('click', '.expandir', this.exibirFoto); } this.carregamentoOk = function() { $.ajax('receita.html', { timeout: 3000, success: function(response) { .html(response).slideDown(); } }); this.receita = this.el.find(".receita"); this.receita
    • Eduardo Mendes (edumendes@gmail.com)42 Funciona? this incorreto
    • Eduardo Mendes (edumendes@gmail.com)43 Refatorando function Receita(el) { this.el = el; ! ! ! ! ! ! ! ! ! this.el.on('click', 'button', this.carregamentoOk); this.el.on('click', '.expandir', this.exibirFoto); } this.carregamentoOk = function() { $.ajax('receita.html', { timeout: 3000, success: function(response) { .html(response).slideDown(); } }); this.receita = this.el.find(".receita"); this.receita dentro da $.ajax, this se refere às configurações
    • Eduardo Mendes (edumendes@gmail.com)44 Refatorando function Receita(el) { this.el = el; ! ! ! ! ! ! ! ! ! ! ! this.el.on('click', 'button', this.carregamentoOk); this.el.on('click', '.expandir', this.exibirFoto); } this.carregamentoOk = function() { $.ajax('receita.html', { timeout: 3000, ! success: function(response) { this.receita.html(response).slideDown(); } }); this.receita = this.el.find(".receita"); var that = this; context: that, configura quem é o this dentro do callback
    • Eduardo Mendes (edumendes@gmail.com)45 Refatorando this.exibirFoto = function(event) { event.preventDefault(); $(".bebida").find("img").show(); }
    • Eduardo Mendes (edumendes@gmail.com)46 Refatorando this.exibirFoto = function(event) { event.preventDefault(); that.el.find("img").show(); }
    • Eduardo Mendes (edumendes@gmail.com)47 Funciona?
    • Eduardo Mendes (edumendes@gmail.com) Forms 48
    • Eduardo Mendes (edumendes@gmail.com)49 Submetendo via POST com jQuery Ajax $(document).ready(function () { $('form').on('submit', function(e) { $.ajax('pedidos.html', { type: 'POST' }); }); });
    • Eduardo Mendes (edumendes@gmail.com)50 Formulário
    • Eduardo Mendes (edumendes@gmail.com)51 Submetendo via POST com jQuery Ajax $(document).ready(function () { $('form').on('submit', function(e) { $.ajax('pedidos.html', { type: 'POST' }); }); });
    • Eduardo Mendes (edumendes@gmail.com)52 Submetendo via POST com jQuery Ajax $(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: 'POST' }); }); }); e os dados?
    • Eduardo Mendes (edumendes@gmail.com)53 Submetendo via POST com jQuery Ajax $(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: 'POST' }); }); }); <form action="pedidos.html"> <select name="sabor" id="sabor"> <option>Limao</option> <option>Negro</option> </select> <input type="text" id="quantidade" name="quantidade" value="1"/> <input type="submit" value="FAZER O PEDIDO" /> </form>
    • Eduardo Mendes (edumendes@gmail.com)54 Submetendo os dados $(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: ‘POST’, ! ! ! ! }); }); }); data: {"sabor": $("#sabor").val(), "quatidade": $("#quantidade").val() }
    • Eduardo Mendes (edumendes@gmail.com)55 Submetendo os dados $(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: ‘POST’, data: ! ! ! }); }); }); $('form').serialize() .serialize cria uma string de submissão com todos os elementos do formulário
    • Eduardo Mendes (edumendes@gmail.com)56 Submetendo os dados $(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: ‘POST’, data: ! ! ! ! }); }); }); $('form').serialize() success: function(result) { $('form').remove(); $('#pedido').hide().html(result).fadeIn(); }
    • Eduardo Mendes (edumendes@gmail.com)57 Funciona?
    • Eduardo Mendes (edumendes@gmail.com) jQuery, Ajax e JSON 58
    • Eduardo Mendes (edumendes@gmail.com)59 <p> Seu pedido de 4 sanduiches, do tipo Hamburguer, foi registrado no valor de R$ 20.00. Aguarde ser chamado! Número do pedido: 86 </p> { "pedido": 86, "sanduiche": "Hambuguer", "quantidade": 4, "total": 20.00 } HTML JSON Servidor decide como o HTML é formatado O servidor fornece os dados que pode ser apresentado de maneiras diferentes JSON - Java Script Object Notation Um formato de dados para se utilizar em web
    • Eduardo Mendes (edumendes@gmail.com)60 Este código trabalha com HTML formatado $(document).ready(function () { $('form').on('submit', function(event) { var form = $(this); event.preventDefault(); $.ajax('pedidos.html', { type: 'POST', data: form.serialize(), success: function(result) { form.remove(); $('#pedido').hide().html(result).fadeIn(); } }); }); });
    • Eduardo Mendes (edumendes@gmail.com)61 Este código trabalha com HTML formatado $('form').on('submit', function(event) { var form = $(this); event.preventDefault(); $.ajax('pedidos.html', { type: 'POST', data: form.serialize(), ! success: function(result) { form.remove(); $('#pedido').hide().html(result).fadeIn(); } ! }); }); dataType: 'json', , contentType: 'application/json' transforma a resposta em JSON o resultado não é HTML então é preciso criar um nó JSON solicita que a resposta seja no formato JSON
    • Eduardo Mendes (edumendes@gmail.com)62 Este código trabalha com HTML formatado success: function(result) { form.remove(); ! ! ! ! ! ! } { "pedido": 86, "sanduiche": "Hambuguer", "quantidade": 4, "total": 20.00 } result <p>Pedido: 86. Sanduiche: Hamburguer. Quantidade: 4. Total: R$ 20.00</p> var texto = $("<p></p>"); texto.append("Pedido: “ + result.pedido + ". "); texto.append("Quantidade: “ + result.quantidade + “. "); texto.append("Sanduiche: “ + result.sanduiche + ". "); texto.append("Total: “ + result.total + ". "); Json vai ser convertido em um objeto JavaScript $('#pedido').hide().html(msg).fadeIn(); Cria e adiciona o nó DOM
    • Eduardo Mendes (edumendes@gmail.com)63 Refatorando $.ajax('pedidos.html', {…}); <form action=“/pedidos.html” method=“post"> … </form> $.ajax(‘pedidos.html’).attr(‘action’), {…}); .attr(<atributo>); .attr(<atributo>, <valor>); métodos jQuery
    • Eduardo Mendes (edumendes@gmail.com)64 Código finalizado $('form').on('submit', function (event) { var form = $(this); event.preventDefault(); $.ajax(form.attr('action'), { type: 'POST', dataType: 'json', data: form.serialize(), success: function (result) { form.remove(); var texto = $("<p></p>"); texto.append("Pedido: " + result.pedido + ". "); texto.append("Quantidade: " + result.quantidade + ". "); texto.append("Sanduiche: " + result.sanduiche + ". "); texto.append("Total: " + result.total + ". "); $('#pedido').hide().html(msg).fadeIn(); }, contentType: 'application/json' }); });
    • Eduardo Mendes (edumendes@gmail.com) Métodos úteis 65
    • Eduardo Mendes (edumendes@gmail.com)66 Ajax & JSON <h1>Bem-vindo ao jQuery Festas</h1> <button>Bebida em Destaque</button> ! <div class="destaque"> <h2>Destaque</h2> <img src=""/> <p></p> </div>
    • Eduardo Mendes (edumendes@gmail.com)67 Ajax & JSON <h1>Bem-vindo ao jQuery Festas</h1> <button>Bebida em Destaque</button> ! <div class="destaque"> <h2>Destaque</h2> <img src=""/> <p></p> </div> $('button').on('click', function () { $.ajax('bebidas/favoritas/1', { contentType: 'application/json', dataType: 'json', success: function(result) { { "nome": "Lemon Breeze", "imagem": "imagens/yellow.gif" } var destaque = $('.destaque'); destaque.find('p').html( destaque.find('img') result.nome); .attr(‘src', result.imagem); } }); }); e se existissem múltiplos destaques?
    • 68
    • Eduardo Mendes (edumendes@gmail.com)69 JSON com vários resultados { "nome": "Lemon Breeze", "imagem": "imagens/yellow.gif" }, [ ! ! ! ! { "nome": "Dark Juice", "imagem": "imagens/black.gif" }, { "nome": "Chai Tea", "imagem": "imagens/chai.gif" } ] success: function(result) { var destaque = $('.destaque'); destaque.find('p').html(result.nome); destaque.find('img') .attr('src', result.imagem); } result application.js O resultado é um array de objetos precisa-se de um laço para cada destaque
    • Eduardo Mendes (edumendes@gmail.com)70 $.each -> iteração sobre um array success: function(result) { var destaque = $(‘.destaque ); destaque.find(‘p').html( .nome); destaque.find('img') .attr('src', .imagem); } application.js <li class="destaque-0"> … </li> ! <li class="destaque-1"> … </li> ! <li class="destaque-2"> … </li> index.html $.each(colecao, function(<indice>, <objeto>) {}); Executa a função para cada objeto da coleção $.each(result, function(indice, bebida) { -' + indice bebida bebida
    • Eduardo Mendes (edumendes@gmail.com) E quando a quantidade de informação for variável? 71
    • Eduardo Mendes (edumendes@gmail.com)72 E quando a quantidade de informação for variável?
    • Eduardo Mendes (edumendes@gmail.com)73 Transforme um array de objetos em HTML $('.atualizar-pedidos').on('click', function() { $.ajax('status/todos.json', { contentType: 'application/json', dataType: 'json', success: function (result) {...} }); }); [ { "numero": "50", "status": "Não iniciado" }, { "numero": "45", "status": "Entregue" }, { "numero": "47", "status": "Cancelado" } ! ] result $.getJSON(url, success); $.getJSON('status/todos.json', function(result) {}); o resultado será um array de objetos application.js
    • Eduardo Mendes (edumendes@gmail.com)74 Transforme um array de objetos em HTML $('.atualizar-pedidos').on('click', function() { $.getJSON('status/todos.json', function(result) { ! ! }); }); [ { "numero": "50", "status": "Não iniciado" }, { "numero": "45", "status": "Entregue" }, { "numero": "47", "status": "Cancelado" } ! ] result <li> <h3>numero</h3> <p>status</p> </li> <li> <h3>…</h3> <p>…</p> </li> <li> <h3>…</h3> <p>…</p> </li> é precisso transformar para um formato HTML application.js var pedidos = ???? $('ul').html(pedidos);
    • Eduardo Mendes (edumendes@gmail.com)75 Array com $.map() $.map(colecao, function(<item>, <indice>) {}); a coleção pode ser um array a ordem é diferente do each o método map um array modificado a partir do array passado com o parâmetro var numeros = [1,2,3,4] ! var numeros-novos = $.map(numeros, function(item, indice) { return item + 1 }); numeros [1, 2, 3, 4] numeros-novos [2, 3, 4, 5]
    • Eduardo Mendes (edumendes@gmail.com)76 Do JSON para o HTML ! { "numero": "50", "status": "Não iniciado" }, { "numero": "45", "status": "Entregue" }, { "numero": "47", "status": "Cancelado" } [ ]$.map(result, function(pedido, indice) { var item-pedido = $(“<li></li>”); return item-pedido; }); [ ]<li></li> <li></li> <li></li>
    • Eduardo Mendes (edumendes@gmail.com)77 Do JSON para o HTML ! { "numero": "50", "status": "Não iniciado" }, { "numero": "45", "status": "Entregue" }, { "numero": "47", "status": "Cancelado" } [ ]$.map(result, function(pedido, indice) { var item-pedido = $(“<li></li>”); ! ! return item-pedido; }); [ ] $(‘<h3> Pedido: ’ + pedido.numero + ‘</h3>’).appendTo(item-pedido); $(‘<p>’ + pedido.status + ‘</p>’).appendTo(item-pedido); <li> <h3>Pedido: 50</h3> <p>Não iniciado</p> </li> <li> <h3>Pedido: 45</h3> <p>Entregue</p> </li> <li> <h3>Pedido: 47</h3> <p>Cancelado</p> </li>
    • Eduardo Mendes (edumendes@gmail.com)78 Do JSON para o HTML $.map(result, function (pedido, indice) { var item_de_pedidos = $('<li></li>'); $('<h2>Pedido: ' + pedido.numero + '</h2>').appendTo(item_de_pedidos); $('<p>' + pedido.status + '</p>').appendTo(item_de_pedidos); return item_de_pedidos; }); $('.atualizar-pedidos').on('click', function () { $.getJSON('status/todos.json', function (result) { var pedidos = retorna-se a lista alterada $('ul').html(pedidos); }); });
    • Eduardo Mendes (edumendes@gmail.com) E quando a quantidade de informação for 79
    • Eduardo Mendes (edumendes@gmail.com) Plugins 80
    • Eduardo Mendes (edumendes@gmail.com) Plugin 81 Uma nova funcionalidade que pode ser chamada a partir de uma seleção jQuery Pode ser reutilizada em outros projetos encapsulamento e reaproveitamento de código
    • Eduardo Mendes (edumendes@gmail.com) a função $ $.(a).css(“color”, “yellow”); a coleção pode ser um array a ordem é diferente do each Quando se utiliza a função $, o valor retornado é um objeto jQuery $.(a).css(…) Este objeto contém todos os métodos jQuery que estamos utilizando $.(a).click(…) $.(a).addClass(…) Além de todas as propriedades associadas a eles
    • Eduardo Mendes (edumendes@gmail.com) $.fn 83 Todos este métodos estão no objeto $.fn Novos métodos (plugins) também deverão ser adicionados a ele
    • Eduardo Mendes (edumendes@gmail.com)84 Caminho simples para o plugin A forma mais simples é adicionar uma propriedade ao $.fn $.fn.umPlugin = function() { // lógica encapsulada }
    • Eduardo Mendes (edumendes@gmail.com)85 Por partes $ apelido para o objeto jQuery window.jQuery = window.$ = jQuery então porque não utilizar:
    • Eduardo Mendes (edumendes@gmail.com)86 Por partes var jQuery = function(selector, context) { return new jQuery.fn.init(selector, context, rootjQuery); } jQuery é uma função Objeto jQuery.fn = jQuery.prototype uma propriedade que todos os objetos herdam de Global
    • Eduardo Mendes (edumendes@gmail.com) Função
 Construtora 87 function Carro(fabricante, modelo, ano) { this.fabricante = fabricante; this.modelo = modelo; this.ano = ano; } var outroCarro = new Carro("Hyundai", "Tucson", 2009);
    • Eduardo Mendes (edumendes@gmail.com)88 function Carro(fabricante, modelo, ano) { this.fabricante = fabricante; this.modelo = modelo; this.ano = ano; } var outroCarro = new Carro("Hyundai", "Tucson", 2009); outroCarro.abs = true; var aqueleCarro = new Carro("Ford", "Fiesta", 2014);
    • Eduardo Mendes (edumendes@gmail.com)89 function Carro(fabricante, modelo, ano) { this.fabricante = fabricante; this.modelo = modelo; this.ano = ano; } var outroCarro = new Carro("Hyundai", "Tucson", 2009); outroCarro.abs = true; var aqueleCarro = new Carro("Ford", "Fiesta", 2014); Carro.prototype.abs = true; a propriedade estará disponível em todas as infâncias do objeto
    • Eduardo Mendes (edumendes@gmail.com)90 Um plugin simples “Amarelar" o que se quiser $.(a).css(“color”, “yellow”); $.fn.amarelar = function() { // lógica encapsulada }
    • Eduardo Mendes (edumendes@gmail.com)91 Um plugin simples “Amarelar" o que se quiser $.fn.amarelar = function() { this.css(‘color’, ‘yellow’); } $(document).ready(function () { $('a').amarelar(); });
    • Eduardo Mendes (edumendes@gmail.com)92 Encadeamento “Amarelar" o que se quiser $.fn.amarelar = function() { this.css(‘color’, ‘yellow’); return this; } $(document).ready(function () { $(‘a’).amarelar().fadeIn(); });
    • Eduardo Mendes (edumendes@gmail.com) Para estar disponível em todas as instâncias 93 utilize $.fn
    • Eduardo Mendes (edumendes@gmail.com) E se existirem outros plugins que utilizam parâmetros com mesmos nomes? 94 e quanto
 à $??
    • Eduardo Mendes (edumendes@gmail.com)95 Protegendo o escopo Utilize Funções IIFE (Immediately-Invoked Function Expressions) padrão comum para evitar problemas de sombreamento de variáveis tudo que for declarado
 tem escopo somente nesse bloco (function() { var qualquer = “Hello”; })(); var carro = new Carro(); ! (function(c) { c.ligar(); })(carro); (function($) { … })(jQuery); modo jQuery
    • Eduardo Mendes (edumendes@gmail.com)96 Um plugin com IIFE “Amarelar" o que se quiser $.fn.amarelar = function() { this.css(‘color’, ‘yellow’); } $(document).ready(function () { $('a').amarelar(); });
    • Eduardo Mendes (edumendes@gmail.com)97 Um plugin com IIFE “Amarelar" o que se quiser (function($) { $.fn.amarelar = function() { this.css(‘color’, ‘yellow’); } })(jQuery); $(document).ready(function () { $('a').amarelar(); });
    • Eduardo Mendes (edumendes@gmail.com) Preços 98
    • Eduardo Mendes (edumendes@gmail.com)99 index.html <ul class="bebidas"> <li class="bebida" data-preco="15.00"> <p> <img src="imagens/yellow.gif"/> </p> <h3>Lemon Breeze</h3> <button>Consultar Preco</button> </li> <li class="bebida" data-preco="20.00"> … </li> <li class="bebida" data-preco="17.00"> … </li> $('.bebida').precificar();
    • Eduardo Mendes (edumendes@gmail.com)100 Criando um plugin $.fn.precificar = function() { console.log('Chamando preficicar'); console.log(this); } Disponibiliza o método como uma função jQuery o this será o objeto jQuery onde o plugin foi chamado $('.bebida').precificar();
    • Eduardo Mendes (edumendes@gmail.com)101 Criando um plugin e adicionando comportamento $.fn.precificar = function() { var bebida = this; bebida.on('click', 'button', function() { var preco = bebida.data('preco'); var detalhes = $('<p>Preco: ' + preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); }; $(document).ready(function () { $('.bebida').precificar(); });
    • Eduardo Mendes (edumendes@gmail.com) Preços 102
    • Eduardo Mendes (edumendes@gmail.com)103 Corrigindo o comportamento $.fn.precificar = function() { console.log('Chamando preficicar'); console.log(this); } this.each()…
    • Eduardo Mendes (edumendes@gmail.com)104 Criando um plugin e adicionando comportamento $.fn.precificar = function() { var bebida = this; bebida.on('click', 'button', function() { var preco = bebida.data('preco'); var detalhes = $('<p>Preco: ' + preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); };
    • Eduardo Mendes (edumendes@gmail.com)105 Criando um plugin e adicionando comportamento $.fn.precificar = function() { ! var bebida = this; bebida.on('click', 'button', function() { var preco = bebida.data('preco'); var detalhes = $('<p>Preco: ' + preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); ! }; this.each(function () { });
    • Eduardo Mendes (edumendes@gmail.com)106 Plugins com parâmetros $(document).ready(function () { $('.bebida').precificar({ dias:5 }); }); $.fn.precificar = function(opcoes) { … var preco = bebida.data('preco'); var detalhes = $(‘<p>Preco:' + opcoes.dias + ' drinks por ‘ + opcoes.dias * preco + '</p>'); e se fosse necessário parâmetros com valores default?
    • Eduardo Mendes (edumendes@gmail.com)107 Parâmetros opcionais $(document).ready(function () { $('.bebida').precificar({ dias:5 }); }); $(document).ready(function () { $(‘.bebida').precificar(); }); com ou sem parâmetros $.fn.precificar = function(opcoes) { …
    • Eduardo Mendes (edumendes@gmail.com)108 Parâmetros opcionais com $.extend Combina os objetos $.extend(target[, objeto1, objeton]); $.extend({ dias: 3 }, { preco: 5 }); { dias: 3, preco: 5 } $.extend({ dias: 3 }, {}); { dias: 3 } $.extend({ dias: 3 }, { dias: 5 }); { dias: 3 } a forma de configurar um valor default
    • Eduardo Mendes (edumendes@gmail.com)109 Adicionando o parâmetro opcional $.fn.precificar = function (opcoes) { this.each(function () { var bebida = $(this); console.log(bebida); bebida.on('click.precificar', 'button', function () { var preco = bebida.data('preco'); … }); }); };
    • Eduardo Mendes (edumendes@gmail.com)110 Adicionando o parâmetro opcional $.fn.precificar = function (opcoes) { this.each(function () { var bebida = $(this); console.log(bebida); bebida.on('click.precificar', 'button', function () { var preco = bebida.data('preco'); … }); }); }; var configuracoes = $.extend({dias: 3}, opcoes);
    • Eduardo Mendes (edumendes@gmail.com)111 Adicionando o parâmetro opcional $.fn.precificar = function (opcoes) { this.each(function () { var bebida = $(this); var configuracoes = $.extend({dias: 3}, opcoes); bebida.on('click.precificar', 'button', function () { var preco = bebida.data('preco'); var detalhes = $('<p>Preco:' + configuracoes.dias + ' drinks por ' + configuracoes.dias * preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); }); };
    • Eduardo Mendes (edumendes@gmail.com) Refatorando para parâmetros 112
    • Eduardo Mendes (edumendes@gmail.com)113 Adicionando o parâmetro opcional $.fn.precificar = function (opcoes) { this.each(function () { var bebida = $(this); var config = $.extend({dias: 3}, opcoes); bebida.on('click.precificar', 'button', function () { var preco = bebida.data('preco'); var detalhes = $('<p>Preco:' + config.dias + ' drinks por ' + config.dias * preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); }); };
    • Eduardo Mendes (edumendes@gmail.com)114 Adicionando o parâmetro opcional $.fn.precificar = function (opcoes) { this.each(function () { ! var config = $.extend({ dias: 3, bebida: $(this), preco: $(this).data(‘preco') botao: $(this).find(‘button') }, opcoes); config.bebida.on('click.precificar', 'button', function () { var detalhes = $('<p>Preco:' + config.dias + ' drinks por ' + config.dias * config.preco + '</p>'); config.botao.hide(); config.bebida.append(detalhes); }); }); }; config.dias config.bebida config.preco config.botao
    • Eduardo Mendes (edumendes@gmail.com)115 Mais um botão