Baixe o app para aproveitar ainda mais
Prévia do material em texto
Aplicações Ricas para Internet Prof. Dr. Wagner J. DizeróProf. Dr. Wagner J. Dizeró wagner@unilins.edu.brwagner@unilins.edu.br Versão: 12/11/2014 Plano de Ensino � Ementa � Critérios de Avaliação� Critérios de Avaliação � Conteúdo Programático � Bibliografia 2 Ementa � Desenvolvimento de interfaces gráficas ricas para a Internet. Páginas dinâmicas com conexão a banco de dados na web. Segurança e dados na web. Segurança e desempenho de sistemas para a Internet. Integração de sistemas baseados na Internet. AJAX. 3 Critérios de Avaliação � Composição de Nota: � Provas: peso 8.0 (oito) � Trabalhos: peso 2.0 (dois)� Trabalhos: peso 2.0 (dois) � Frenquência: � Mínima de 75% (venham 100%!!!) 4 Conteúdo Programático � Aplicação Rica para Internet � Definição � jQuery � Noções Básicas � Tipos de Seletores � Efeitos � Comandos de Manipulação� Comandos de Manipulação � Eventos � Formulários � Carregamento de páginas � Ajax � Ajax com jQuery � .load(), .get(), .post(), .ajax() � Integração com PHP e MySQL � CRUD 5 Bibliografia Livro Texto: 1. PHP 4: A Bíblia; Converse, Tim et al; Ed. Campus; 1ª edição; 2001; 5 exemplares. 2. Use a Cabeça: PHP e MySQL; Beighley, Linn; Ed. Alta Books; 1ª edição; 2010; 10 exemplares. 3. Ajax (ASYNCHRONOUS JAVASCRIPT AND XML); Soares, Walace; Ed. Érica; 1ª edição; 2006; 10 exemplares. Complementar:Complementar: 4. Profissional PHP: Programando; Castagneto, Jesus et al; Ed. Makron Books; 1ª edição; 2001; 1 exemplar. 5. PHP e MySQL: Desenvolvimento Web; Welling, Luke et al; Ed. Campus; 1ª edição; 2001; 1 exemplar. 6. Programando em PHP: Conceitos e Aplicações; Soares, Walace; Ed. Érica; 1ª edição; 2000; 5 exemplares. 7. Fundamentos de PHP; Meloni, Julie C.; Ed. Ciência Moderna; 1ª edição; 2000; 5 exemplares. 8. Guia de Consulta Rápida: Integrando PHP com MySQL; Stoco, Lucio M.; Ed. Novatec; 1ª edição; 2000; 5 exemplares. 6 Aplicação Rica para Internet Rich Internet Application (RIA) 7 O que é Interface Rica (RIA)? � Rich Internet Application (RIA) é a combinação da riqueza de aplicações Desktop tradicionais e a facilidade de Desktop tradicionais e a facilidade de acesso da Web. 8 O que é Interface Rica (RIA)? � Contribui com conteúdo dinâmico e interfaces avançadas de usuários com controles desenvolvidos com Ajax, Html, Javascript e tecnologias relacionadas.relacionadas. � A principal mudança consiste em carregar um site uma única vez e apenas atualizar áreas do site através de chamadas remotas, sem recarregar (reload) todo o site. 9 jQuery Site oficial: http://jquery.com O que é jQuery? � Biblioteca Javascript cross-browser � Software livre e aberto (GPL) � Criada em agosto de 2005� Criada em agosto de 2005 � Introduzem algumas funcionalidades adicionais, não nativas de html e css � Simplicidade é a palavra que resume e norteia o desenvolvimento com jQuery 11 Para que serve jQuery? � Simplificar tarefas de Javascript � Prover interatividade � Adicionar efeitos visuais e animações� Adicionar efeitos visuais e animações � Acessar e manipular conteúdos � Modificar apresentação e estilização � Buscar dados no servidor remoto (AJAX) 12 Qual a versão atual do jQuery? � Repositório: � http://code.jquery.com/ jQuery 2.x (IE <9 not supported) � Há 2 formatos: � "uncompressed" recomendado para debug na fase de desenvolvimento � "minified" (.min) é compactado para uso em produção 13 Como instalar jQuery? � A partir de arquivo local � Hospedando a biblioteca localmente no seu HD ou servidor remoto no qual o site será hospedado e linkar a página <script src="jquery-2.0.3.min.js"></script><script src="jquery-2.0.3.min.js"></script> � A partir de arquivo remoto público � Vários servidores, como Google e Microsoft, mantêm em seus sites as diferentes versões da biblioteca para acesso público. <script src="http://code.jquery.com/jquery-2.0.3.js"></script> 14 Como usar o jQuery? � Modo de uso: � seletor.comando([parâmetros]) � Exemplos:� Exemplos: � $('h1').css('color'); � Retorna a cor atual de texto do cabeçalho h1 � $('h1').css('color', 'green'); � Altera todo cabeçalho h1 para texto em verde � $('h1').css({'color': 'yellow', 'background': 'blue'}); � Altera mais de um par propriedade/valor numa única chamada 15Obs.: Um seletor por ser tag, id, class ou, ainda, ser composto. Tipos de Seletores • tag • especiais• tag • id • class • this • especiais • grupamento • composto • filtro • encadeamento • formulários Seletor por tag, id e class // seleciona todas as div´s $('input').click(function(){ $('div').css({'color':'yellow', 'background':'blue'}); }); // seleciona o elemento com id igual a #id// seleciona o elemento com id igual a #id $('input').click(function(){ $('#id').css({'color':'yellow', 'background':'blue'}); }); // seleciona os elementos da classe .class $('input').click(function(){ $('.class').css({'color':'yellow', 'background':'blue'}); }); 17 Formas Alternativas de Uso // forma tradicional $('p').css('background','yellow'); // atribuindo para uma variável var p = $('p'); p.css('fontWeight', 'bold');p.css('fontWeight', 'bold'); // forma alternativa para evitar conflitos jQuery('p').css('fontSize', '24px'); // criando uma nova forma alternativa var $j = jQuery.noConflict(); $j('p').css('fontFamily', 'verdana, arial'); 18 Exemplo – seletor tag <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>jQuery</title> </head> <body> <input type="button" value="Mudar Cor"><input type="button" value="Mudar Cor"> <div>Manipulando CSS através de jQuery</div> <div>Usar jQuery é muito prático!</div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('input').click(function(){ $('div').css({'color':'yellow', 'background':'blue'}); }); </script> </html> 19Obs.: Todas as divs do documento serão formatadas Exemplo – seletor id <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>jQuery</title> </head> <body> <input type="button" value="Mudar Cor"><input type="button" value="Mudar Cor"> <div id="destaque">Manipulando CSS através de jQuery</div> <div>Usar jQuery é muito prático!</div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('input').click(function(){ $('#destaque').css({'color':'yellow','background':'blue'}); }); </script> </html> 20Obs.: Apenas a div com id ‘destaque’ será formatada Exemplo – seletor class <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> </head> <body> <input type="button" value="Destacar"> <ul> <li class="promocao">Pen Drive</li><li class="promocao">Pen Drive</li> <li class="promocao">Impressora</li> <li>Disquete</li> </ul> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('input').click(function(){ $('.promocao').css({'color':'yellow','background':'blue'}); }); </script> </html> 21Obs.: Apenas os itens da classe ‘promocao’ serão formatadas Exemplo – objeto this <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> </head> <body> <p>HMTL</p> <p>CSS</p><p>CSS</p> <p>jQuery</p> <p>AJAX</p> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('p').click(function(){ $(this).css('color', 'red'); }); </script> </html> 22 Seletores especiais � Grupamento de seletores: � Aplica cor para vários seletores � $('p, span, .classe').css('color', 'red'); � Seletores compostos: � Aplica fundo para span dentro de div � $('div span').css('background','red');� $('div span').css('background', 'red'); � Seletores com filtros: � first, last, not, even, odd, eq, gt, lt, contains, parent, ... � $('tr:even').css('background', 'red'); � Seletores encadeados: � Fundo azul no terceiro h3 dentro de #content � $('#content').find('h3').eq(2).css('background', 'blue'); 23 Seletores por atributo � [atribuito] � Elementos que contenham determinado atributo � $('div[id]').css('color', 'lime'); � [atributo=valor] � Elementos com atributo com determinado valor � $('input[type=text']).css('background', 'yellow');� $('input[type=text']).css('background', 'yellow'); � [atributo!=valor]: Elementos que não tenham determinado valor � [atributo^=valor]: Elementos iniciados por um determinado valor � [atributo$=valor]: Elementos que terminem com um valor � [atributo*=valor]: Elementos que contenham um valor 24 Seletores por hierarquia � Ascendente Descendente: � Seleção de descendentes de um elemento � $('form label').css('color', 'red'); � Pai > Filho: � Seleção de filhos de um elemento � $('div > *').css('background', 'red'); 25 � $('div > *').css('background', 'red'); � Anterior + Próximo: � Seleção do elemento seguinte � $('label + input').css('background', 'red'); � Anterior ~ Irmãos: � Seleção dos elementos irmãos � $('#inicio ~ div').css('background', 'blue'); Exercícios 1. Exibir em azul todos os parágrafos <p> da página. 2. Exibir com texto em vermelho e fundo laranja todos os cabeçalhos <h1> da página. 3. Exibir em negrito todos os conteúdos que estejam contidos na tag <span> da página. 4. Exibir em itálico todos os parágrafos <p> que pertençam a classe "citacao". 5. Fazer com que todos os elementos marcados com a classe "external" sejam 5. Fazer com que todos os elementos marcados com a classe "external" sejam marcados com uma borda vermelha. 6. O elemento com id "myTable" foi atribuído a uma tabela da página. Formate apenas essa tabela com fonte Arial. 7. Aplicar fundo amarelo para todos os cabeçalhos <h2> e <h3>. 8. Aplicar a cor de texto verde para as tag´s <p> que estejam dentro de uma div com id igual a "ambiental". 9. Aplicar fundo branco a todos os botões de formulários. 10. Aplicar cor azul ao texto de label´s contidos em formulários. 26 Efeitos • show • fadeIn• show • hide • toggle • slideDown • slideUp • slideToggle • fadeIn • fadeOut • fadeTo • animate • delay • stop Efeitos � As tarefas de esconder e revelar conteúdos com transições suaves é uma funcionalidade jQuery que pode enriquecer a experiência do pode enriquecer a experiência do usuário. � Efeitos podem ser úteis para criação de menus, galerias de fotos, transição de conteúdo, etc. 28 Efeitos show() e hide() � Os efeitos show() e hide() são usados, respectivamente, para revelar e ocultar um elemento seletorJQuery. � $(‘div’).show(); � $(‘div’).hide(); � Opcionalmente, é possível passar um � Opcionalmente, é possível passar um parâmetro duração que permite revelar/ocultar suavemente um elemento. � $(‘div’).show(1000); � Valores pré-definidos: � fast equivale a 200ms � normal equivale a 400ms � slow equivale a 600ms 29 Efeito show() <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> div{background:blue;width:300px;height:200px;display:none;} </style> </head> <body> <input type="button" value="show"> <div></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('input').click(function() { $('div').show('slow'); }); </script> </html> 30 Efeito hide() <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> div{background:blue;width:300px;height:200px;display:block;} </style> </head> <body> <input type="button" value="hide"> <div></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('input').click(function() { $('div').hide('slow'); }); </script> </html> 31 Exercícios 1. Criar 2 botões na mesma página, um para exibir a div e outro para ocultá- la. 2. Utilizar um único botão na página e fazer com que a div seja exibida e ocultada de forma intercalada a cada clique no botão. 32 Efeito toggle() � O método toggle() permite criar p efeito de alternância de visibilidade do elemento definido por seletorJQuery. $('input').click(function() { $('div').toggle(); }); 33 slideDown, slideUp e slideToggle � São efeitos para exibir/ocultar, fazendo a transição por meio do aumento/diminuição gradativo da altura de um elemento seletorJQuery. � $(‘div’).slideDown();� $(‘div’).slideDown(); � $(‘div’).slideUp(); � Opcionalmente, é possível usar o método slideToggle para causar o efeito de alternância de visibilidade do elemento. � $(‘div’).slideToggle(); 34 Efeito slideDown (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> #titulo{ background:#68838B; width:270px; height:20px; height:20px; padding: 0px 5px 0px 5px; } #corpo{ background:#9AC0CD; width:270px; height:80px; padding:5px 5px 5px 5px; display: none; } </style> </head> 35 Efeito slideDown (2/2) <body> <div id="titulo">O que é jQuery?</div> <div id="corpo"> jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. </div></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#titulo').click(function() { $('#corpo').slideDown('slow'); }); </script> </html> 36 Efeito slideUp (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> #titulo{ background:#68838B; width:270px; height:20px; height:20px; padding: 0px 5px 0px 5px; } #corpo{ background:#9AC0CD; width:270px; height:80px; padding:5px 5px 5px 5px; display: block; } </style> </head> 37 Efeito slideUp (2/2) <body> <div id="titulo">O que é jQuery?</div> <div id="corpo"> jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. </div></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#titulo').click(function() { $('#corpo').slideUp('slow'); }); </script> </html> 38 Efeito slideToggle (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> #titulo{ background:#68838B; width:270px; height:20px; height:20px; padding: 0px 5px 0px 5px; } #corpo{ background:#9AC0CD; width:270px; height:80px; padding:5px 5px 5px 5px; } </style> </head> 39 Efeito slideToggle (2/2) <body> <div id="titulo">O que é jQuery?</div> <div id="corpo"> jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. </div></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#titulo').click(function() { $('#corpo').slideToggle('slow'); }); </script> </html> 40 fadeIn, fadeOut e fadeToggle � São efeitos para exibir/ocultar, fazendo a transição por meio do aumento/diminuição gradativo da opacidade de um elemento seletorJQuery. � $(‘div’).fadeIn();� $(‘div’).fadeIn(); � $(‘div’).fadeOut(); � Opcionalmente, é possível usar o método fadeTo para causar o efeito de alternância de visibilidade do elemento. � $(‘div’).fadeToggle(); 41 Efeito fadeIn <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> #div { background:#68838B; width:500px; height:15px; } #img { background:#C6E2FF; width:500px; display:none;} </style> </head></head> <body> <div id="div">fadeIn</div> <img id="img" src="../img/jquery.png" /> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#div').click(function() { $('#img').fadeIn('slow'); }); </script> </html> 42 Efeito fadeOut <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> #div { background:#68838B; width:500px; height:15px; } #img { background:#C6E2FF; width:500px; display:block; } </style> </head></head> <body> <div id="div">fadeOut</div> <img id="img" src="../img/jquery.png" /> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#div').click(function() { $('#img').fadeOut('slow'); }); </script> </html> 43 Efeito fadeToggle <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> #div { background:#68838B; width:500px; height:15px; } #img { background:#C6E2FF; width:500px; } </style> </head></head> <body> <div id="div">fadeToggle</div> <img id="img" src="../img/jquery.png" /> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#div').click(function() { $('#img').fadeToggle('slow'); }); </script> </html> 44 Efeito animate() � O método animate() permite criar animações personalizadas. � Somente propriedades CSS de valor numérico podem ser animadas. Os valores configurados nos parâmetros � Os valores configurados nos parâmetros são os valores finais da animação. � É possível usar unidades em %, como {width:’110%’} � além dos operadores += e -=, como {left:’+=10px’} 45 Efeito animate() <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> #div { position:absolute;height:50px;width:50px;background:red; } </style></style> </head> <body> <div id="div"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#div').click(function() { $('#div').animate({left:'300px'}); }); </script> </html> 46 animate() – efeitos encadeados <script> $('#div').click(function() { $('#div') .animate({ left: '+=300px'left: '+=300px' }) .animate({ left: '-=300px' }); }); </script> 47 Exercícios � Criar 2 animações para que os objetos façam as trajetórias de uma quadrado e de um triângulo. 48 1 2 3 4 1 2 3 Efeito delay() – pausar a animação <script> $('#div').click(function() { $('#div') .animate({ left: '+=300px', opacity: '0.1', width: '25px', height: '25px' 49 height: '25px' }) .delay(2000) .animate({ left: '-=300px', opacity: '1.0', width: '50px', height: '50px' }); }); </script> Efeito stop() – parar a animação ... <body> <input id="start" type="button" value="Start" /> <input id="stop" type="button" value="Stop" /> <div id="div"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> 50 <script> $('#start').click(function() { $('#div').animate({left:'+=1000px'}, 3000); }); $('#stop').click(function() { $('#div').stop(); }); </script> </html> Callback � Executar uma função em callback significa que somente após a primeira rotina for finalizada é que a segunda rotina é disparada. � Usar callback garante que uma rotina que dependa da anterior não seja executada antes que esteja devidamente preparada. � seletor.efeito(animação, duração, callback); 51 Callback (cont.) � Por exemplo, imagine que você deseja movimentar uma DIV e, após a animação, apresentar uma mensagem. $('#div').animate({left:'+=500px', width:'150px'},2000);$('#div').animate({left:'+=500px', width:'150px'},2000); $('#div').html('jQuery'); � Aparentemente, o código acima faria isso, mas, na prática, os dois comandos são executados simultaneamente. � O texto irá aparecer antes da animação terminar. 52 Callback (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>jQuery - Callback</title> <style> #div { 53 position:absolute; height:50px; width:50px; background:red; font-size:40px; text-align:center; } </style> </head> Callback (2/2) <body> <div id="div"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#div').click(function() { $('#div') 54 $('#div') .animate( {left:'+=500px', width:'150px'}, 2000, function() { $('#div').html('jQuery'); } ); }); </script> </html> Exercício: Faça uma página web que contenha: Na definição dos estilos deve possuir duas classes: Classe destaque -> Fonte: 15px | Cor da fonte: Vermelho Classe normal -> Fonte: 11px | Cor da fonte: Verde A página deverá conter três botões (input). Botão1: id bt1 | Botão 2: id bt2 | Botão 3: id bt3. O conteúdo da página será: <p><strong class="destaque">Aula 1 </strong><br/> Criação de página web</p> <p><strong class="destaque">Aula 1 </strong><br/> Criação de página web</p> <p><strong>Aula 2 </strong><br/> Criação de banco de dados</p> <p><strong class="normal">Aula 3 </strong><br/> Criação de sistema completo</p> Ações dos botões Botão 1: -fazer com que os elementos da classe normal fiquem com o fundo laranjado. Botão 2: - fazer com que os elementos strong descendentes de p tenham fonte amarela. Botão 3: - fazer com que o botão 2 desapareça - o fundo do botão 1 fique em azul - todos os strong fiquem com fonte 20 55 Comandos de Manipulação • css • html • addClass • removeClass • text • append • empty • val • attr • removeAttr • prop 56 • each • index • eq • find • not • next • offset Método css() � Todas as propriedades CSS podem ser acessadas por jQuery. � Propriedades com nome composto devem ser substituídas suprimindo o devem ser substituídas suprimindo o hífen e colocando a primeira letra da segunda palavra em maiúsculo. � Exemplo: propriedade CSS font-family $(‘p’).css(‘fontFamily’, ‘arial’); 57http://www.blooberry.com/indexdot/css/propindex/all.htm css() - Tabela zebrada ... <table> 58 <table> <tr><td>Mouse</td><td>R$ 39,00</td></tr> <tr><td>Teclado</td><td>R$ 45,00</td></tr> <tr><td>Impressora</td><td>R$ 299,00</td></tr> <tr><td>Pen Drive</td><td>R$ 85,00</td></tr> <tr><td>Notebook</td><td>R$ 2.999,99</td></tr> </table> ... <script> $('tr:even').css('background', '#C6E2FF'); </script> Método html() � O método html() do jQuery permite que você inclua um texto com tags HTML dentro do elemento indicado. � Permite também a operação inversa: Obter o que existe (com a codificação HTML) dentro de um elemento. 59 html() – mudar conteúdo da div <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> </head> <body> <input type="button" value="Clicar" /> 60 <div id="conteudo"><p>Clique no botão!</p></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('input').click(function() { $('#conteudo').html('<p>Botão pressionado!</p>'); }); </script> </html> Método text() � Assim como o método html(), o método text() também inclui texto dentro de um elemento, mas não dentro de um elemento, mas não considera os tags HTML. 61 text() – conteúdo de texto puro <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> </head> <body> <input type="button" value="Clicar" /> <div id="conteudo"><p>Clique no botão!</p></div> 62 <div id="conteudo"><p>Clique no botão!</p></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('input').click(function() { html = $('#conteudo').html(); text = $('#conteudo').text(); alert('html:'+ html + '\ntext: ' + text); }); </script> </html> Método append() � Anexar conteúdo html ao final do elemento <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> </head> 63 <body> <p id="adicionar">Adicionar Parágrafo</p> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#adicionar').click(function(){ $('body').append('<p>Novo Parágrafo</p>'); }); </script> </html> Método empty() � Excluir o conteúdo de um elemento. <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> 64 <meta charset="UTF-8" /> <title>jQuery</title> <style>span{cursor: pointer;}</style> </head> <body> <span id="adicionar">Adicionar</span> | <span id="limpar">Limpar</span> <div id="conteudo"></div> </body> empty() – excluir conteúdo <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script> $('#adicionar').click(function(){ $('#conteudo').append('Nova linha <br />'); }); 65 }); $('#limpar').click(function(){ $('#conteudo').empty(); }); </script> </html> Método val() � O método val() obtém o valor de um campo do formulário. ... <input type="text" name="frase" id="frase" /> <input type="button" value="Adicionar" id="adicionar" /> <div id="conteudo"></div> 66 <div id="conteudo"></div> ... <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script> $('#adicionar').click(function(){ frase = $('#frase').val(); $('#conteudo').append(frase + '<br />'); }); </script> Método attr() � O método attr() altera e retorna atributos e valores de elementos selecionados. ... <body> <input id="carregar" type="button" value="Carregar" /> <br /> 67 <input id="carregar" type="button" value="Carregar" /> <br /> <img id="imagem" /> </body> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script> $('#carregar').click(function(){ $('#imagem').attr('src','../img/jquery.png'); }); </script> </html> Método removeAttr() � Remove atributos de um elemento. ... <script> $('#carregar').click(function(){ if($('#carregar').attr('value')=='Carregar') { 68 if($('#carregar').attr('value')=='Carregar') { $('#imagem').attr('src','../img/jquery.png'); $('#carregar').attr('value','Remover'); } else { $('#imagem').removeAttr('src'); $('#carregar').attr('value','Carregar'); } }); </script> Método prop() (a partir jQuery 1.6) � Use prop() ao invés de attr() para atributos booleanos como disabled, checked, selected, etc. // desabilitar os botões do formulário $('#myForm').find('#button').prop('disabled', true); 69 // habilitar os inputs do formulário $('#myForm').find('input').prop('disabled', false); // marcar todos os checkboxs como ativos $('#myForm').find(':checkbox').prop('checked', true); // desmarcar todos os combobox $('#myForm').find('select').prop('selected', false); Exercício � Criar uma galeria com 5 fotos em miniatura. Ao clicar numa das miniaturas, ela deve ser exibida ampliada. 70 Manipulação de Classes CSS � Existem 4 métodos para manipulação de classes CSS definidas através de folha de estilo. � addClass() – adiciona uma classe � removeClass() – remove uma classe � toggleClass() – alterna uma classe � hasClass() – verifica se existe a classe 71 addClass() e removeClass() (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> .normal { position: absolute; height: 100px; width: 400px; 72 width: 400px; opacity: 0.5 } .destacar { height: 110px; width: 440px; opacity: 1.0 } </style> </head> addClass() e removeClass() (2/2) <body> <img id="img" class="normal" src="../img/jquery.png" /> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#img').hover( function() { 73 function() { $(this).addClass('destacar'); }, function() { $(this).removeClass('destacar'); } ); </script> </html> Método each() ... <ul> <li>Pen Drive</li> <li>Impressora</li> <li>Disquete</li> <li>Zip Drive</li> <li>Notebook</li> </ul> 74 </ul> ... <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('li').each(function(i){ $(this).css('color', (i%2) ?'#F00' :'#00F'); }); </script> Atribuito length ... <ul> <li>Pen Drive</li> <li>Impressora</li> <li>Disquete</li> <li>Zip Drive</li> <li>Notebook</li> 75 <li>Notebook</li> </ul> ... <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> var qtde = $('li').length; alert('Existem ' + qtde + ' itens na lista.'); </script> Método index() � O método index retorna a posição de um elemento. � A primeira posição é 0. � Retorna -1 se o index não existir ... 76 ... <p>1° Parágrafo</p> <p>2° Parágrafo</p> <p>3° Parágrafo</p> ... <script> $('p').click(function() { alert('Índice: ' + $(this).index()); }); </script> Método eq() � O método eq retorna uma determinada ocorrência do conjunto selecionado. � A primeira posição é 0 ... 77 ... <p>1° Parágrafo</p> <p>2° Parágrafo</p> <p>3° Parágrafo</p> ... <script> $('p').eq(2).css('color','red'); </script> Método find() � O método find retorna os elementos descendentes de um elemento selecionado. 78 ... <p>Usar <span>jQuery</span> é <span>fantástico</span>!</p> ... <script> $('p').find('span').css('color', 'red'); </script> Método not() ... <p>HTML</p> <p class="par">CSS</p> � O método not, ao contrário de find, retorna os elementos que não satisfaçam do seletor. <p>jQuery</p> <p class="par">AJAX</p> ... <script> $('p').not('.par').click(function(){ $(this).css('color', 'red'); }); </script> 79 Método next() � Use next() para selecionar o próximo elemento. <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> </head> 80 <body> <h3>h3</h3> <p>p</p> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('h3').append(': atual'); $('h3').next().append(': próximo'); </script> </html> Método offset() � O método offset acessa/modifica o valor das coordenadas CSS top e left de um elemento. ... 81 <div id="div" style="border: 1px solid blue;"></div> ... <script> $('#div').offset({top:'50',left:'80'}); var coord = $('#div').offset(); alert('top: ' + coord.top + '\nleft: ' + coord.left); </script> Exercícios � Elaborar uma página que apresente seu conteúdo em formato de abas. 82 Eventos • click • dblclick • keydown • keypress• dblclick • focus • blur • mouseover • mouseout 83 • keypress • keyup • on • unbind • resize Eventos click e dblclick ... <input type="button" /> <div></div> ... <script> $('input') 84 $('input') .click(function() { $('div').html('click'); }) .dblclick(function() { $('div').html('dblclick'); }); </script> Eventos focus e blur ... <input type="text" /> <div></div> ... <script> $('input') 85 $('input') .focus(function() { $('div').html('focus'); }) .blur(function() { $('div').html('blur'); }); </script> Exercício � Criar um campo de texto para um formulário que deverá inicialmente estar definido como somente leitura (readonly). Ao dar um duplo clique (readonly). Ao dar um duplo clique (dblclick) no campo, ele deverá ser tornar editavel. Ao perder o foco (blur), o campo deverá novamente se tornar somente leitura. 86 mouseover e mousedown ... <input type="text" /> <div></div> ... <script> $('input') 87 $('input') .mouseover(function() { $('div').html('mouseover');}) .mouseout(function() { $('div').html('mousedown'); }); </script> Exercícios � Na frase “jQuery é fantástico!”, fazer com que somente a palavra jQuery fique com cor azul ao mover o mouse fique com cor azul ao mover o mouse sobre (mouseover) ela. Retornar ao normal assim que o mouse sair de cima (mouseout). 88 keydown, keypress e keyup ... <script> $('input') .keydown(function() { $('div').append('keydown '); }) 89 }) .keypress(function() { $('div').append('keypress '); }) .keyup(function() { $('div').append('keyup '); }); </script> Exercício � Criar um campo de texto para consulta no estilo do Google, em que a cada tecla lida (keyup) deve-se a cada tecla lida (keyup) deve-se consultar em uma lista de palavras em vetor e apresentar os itens que contenham a substring digitada. � Use indexOf para localizar uma substring 90 on e unbind ... <input type="button" /><div></div> ... <script> $('input').on('click', function() { $('div').append('único click'); 91 $('div').append('único click'); $('input').unbind('click'); }); </script> A partir da API 1.7, .on substitui .bind, .live e .delegate resize <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Resize</title> </head> <body> <div id="resize"></div> 92 <div id="resize"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $(window).resize(function() { w = $(window).width(); h = $(window).height(); $('#resize').html('largura: ' + w + '<br />altura: ' + h); }); </script> </html> Exercícios � Criar uma página que deverá ter 3 imagens, mas apenas uma delas deverá ser exibida. Ao passar o mouse sobre a imagem, ela deverá ser levemente ampliada, voltando ao tamanho original ao retirar o mouse. Caso ocorra um duplo clique sobre a imagem, deve-se carregar duplo clique sobre a imagem, deve-se carregar uma caixa com as 3 imagens em miniatura. Ao clicar numa das imagens, deve-se fechar a caixa e atualizar o site com a nova imagem. A imagem sempre deve ser apresentada no centro do site. Caso a página seja redimensionada, a imagem deve ser reposicionada ao centro. 93 Formulários Pseudo-seletores Formulários: Pseudo-seletores � :button Seleciona elementos do tipo button � :checkbox Seleciona inputs com type="checkbox“ � :file Seleciona inputs com type="file" � :image Seleciona inputs com type="image" � :input Seleciona <input>, <textarea> e <select>� :input Seleciona <input>, <textarea> e <select> � :password Selecionam inputs com type="password" � :radio Selecionam inputs com type="radio" � :reset Selecionam inputs com type="reset“ � :submit Seleciona inputs com type="submit" � :text Seleciona inputs com type="text" 95$('#myForm :input'); // obtém todos os elementos que aceitam entrada de dados Formulários: Seleção por Estado � :checked Seleciona inputs selecionados � :disabled Seleciona elementos desabilitados � :enabled Seleciona elementos habilitados � :selected Seleciona inputs que estão selecionados� :selected Seleciona inputs que estão selecionados 96 $('input:checked ').css('background', 'blue'); // pinta de azul os elementos checados alert($('input:disabled ').length + " desabilitados."); // obtém a quantidade de elementos desabilitados Exemplo – campos do form (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> </head> <body> <form> <input type="button"> <input type="checkbox"><input type="checkbox"> <input type="file"> <input type="hidden"> <input type="image"> <input type="password"> <input type="radio"> <input type="reset"> <input type="submit"> <input type="text"> <select><option>Option</option></select> <textarea></textarea> </form> </body> 97 Exemplo – campos do form (2/2) <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> var input = $(':input'); $('body').append('Form com ' + input.length + ' inputs.'); input.each(function() { $('body').append('<br />' + $(this).attr('type')); }); </script></script> </html> 98 Formulário com 12 inputs. button checkbox file hidden image password radio reset submit text undefined undefined Exemplo – campo obrigatório (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> input { border: 1px solid #000; float: left; }} div { display:none; color: #F00; float: left; margin-left: 5px; } </style> </head> <body> <input /> <div>Campo Obrigatório!</div> </body> 99 Campo Obrigatório! Exemplo – campo obrigatório (2/2) <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('input') .focus(function() { $(this).css('border', '1px solid #000'); $(this).next().css('display', 'none'); }) .blur(function() { if($(this).val()=='') { $(this).css('border', '1px solid #F00'); $(this).next().css('display', 'block'); } }); </script> </html> 100 Exemplo – seletor :checkbox (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <style> fieldset { width:150px; } </style> </head> <body> <form> <fieldset id="marca"> <legend>Marcas:<input type="checkbox" id="todos" /></legend> <input type="checkbox" /><label>Audi</label><br /> <input type="checkbox" /><label>BMW</label><br /> <input type="checkbox" /><label>Mercedes</label><br /> <input type="checkbox" /><label>Porche</label><br /> <input type="checkbox" /><label>Ferrari</label><br /> </fieldset> <input type="button" id="enviar" value="Enviar" /> </form> </body> 101 Exemplo – seletor :checkbox (2/2) <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#todos').click(function() { $('#marca').find(':checkbox').prop('checked', this.checked); }); $('#enviar').click(function() { qtde = $('#marca').find(':checked').not('#todos').size(); alert('Foram selecionadas ' + qtde + ' marcas.'); }); </script> </html> 102 Exemplo – select change <!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> </head> <body> <select name="uf" id="uf"> <option value="SP">São Paulo</option> <option value="RJ">Rio de Janeiro</option><option value="RJ">Rio de Janeiro</option> <option value="MG">Minas Gerais</option> </select> <div></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('select[id=uf]').change(function() { //$('#uf').change $('div').html($('select[name=uf]').val()); }); </script> </html> 103 Eventos Especiais do Carregamento da Página $(document).ready() $(window).load() 104 Carregamento da Página Completo � Existem duas formas de executar seu script jQuery somente após sua página já estiver completamente carregada: � $(document).ready() � $(window).load() 105 $(document).ready() � O objeto document esta relacionado a todos os elementos da página. Então você pode ter certeza que quando ele estiver carregado, é sinal quando ele estiver carregado, é sinal que os elementos HTML já poderão ser afetados pelo seu script. $(document).ready(function() { $('body').text('document está carregado'); }); 106 $(window).load() � Usar o objeto window significa que essa função só será executada quando todo html, imagens, frames, scripts, enfim, quando a página scripts, enfim, quando a página estiver completamente carregada, ele executará esta função. $(window).load(function() { $('body').text('window está carregado'); }); 107 Exemplo – document e window <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Métodos jQuery para executar Script</title> </head> <body></body></body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $(window).load(function() { $('body').append('window está carregado.<br />'); }); $(document).ready(function() { $('body').append('document está carregado.<br />'); }); </script> </html> 108 Tempo de carregamento (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> var enter = new Date(); $(document).ready(function() { var loadDoc = (new Date()).getTime() - enter.getTime(); $('#doc').text('$(document).ready(): ').append(loadDoc + ' ms'); }); $(window).load(function() { var loadWin = (new Date()).getTime() - enter.getTime(); $('#win').text('$(window).load(): ').append(loadWin + ' ms'); }); </script> </head> 109 Tempo de carregamento (2/2) <body> <h3 id="doc"></h3> <hr /> <h3 id="win"></h3> <img src="https://www.google.com.br/images/srpr/logo11w.png" /> </body> </html> 110 O método document é executado assim que as tags html são carregadas, enquanto o método window só executado após o carregamento da imagem do site. Criando Novos Plugins (function($){$.fn … })(jQuery); Criando Funções e Plugins � Encapsulamento e reaproveitamento de código são as palavras-chave. � Úteis pois facilitam o processo de desenvolvimento, diminuindo o tempo/custo para a implementação. tempo/custo para a implementação. � Sempre haverá um único ponto de manutenção, caso tenha que ser alterada. 112 Podemos criar nossos próprios plugins ou usar inúmeros plugins prontos e disponibilizados na Internet. Plugin Básico 1. Criando um plugin $.fn.azul = function() { return $(this).css('color', 'blue'); };}; 2. Evocando a função $('p').azul(); 113 Todos os parágrafos <p> ficarão em azul Criando Novos Plugins // evitar conflito com outros frameworks (function($){ // plugin para azul $.fn.azul = function() { return $(this).css('color', 'blue'); }; // plugin para amarelo// plugin para amarelo $.fn.verde= function(){ return $(this).css('color', 'green'); } })(jQuery); ... // parágrafos em azul e links internos em verde $('p').azul().find('a').verde(); 114 Plugins – Passagem de Parâmetro (function($){ $.fn.cor = function($cor) { return $(this).css('color', $cor); }; })(jQuery); ... $('p').cor('blue').find('a').cor('green'); 115 Com uso de parâmetro, com uma única função, é possível selecionar qualquer cor. Plugins – Objeto como Parâmetro (function($){ $.fn.cores = function(option){ var config = { corTexto: 'black', corFundo: 'gray' } var app = $.extend(config, option); var css = {var css = { color: app.corTexto, background: app.corFundo } return this.css(css); } })(jQuery); $('h1').cores(); $('p').cores({corTexto:'white', corFundo:'red'}); $('a').cores({corFundo:'orange'}); 116 Exemplos AnimaçãoAnimação SlideShow Accordion WindowModal Exemplo 1 - Animação (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>jQuery - Animação</title> <style> #img { position:absolute; width:100px; 118 width:100px; height:25px; top:50px; left:50%; margin-left:-50px; } </style> </head> <body> <img id="img" src="../img/jquery.png" /> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> Exemplo 1 - Animação (2/2) <script> $(window).load(function() { var start = false; $('#img').click(function() { if(!start) { start = true; $('#img') .animate({top:'+=300px', opacity:'0.1', width:'500px', height:'120px', marginLeft:'-250px'},1000) 119 .animate({top:'+=30px', opacity:'0.5'},1000) .fadeTo(500, 1.0) .delay(2000) .animate({left:'+=800px', opacity:'0.0', width:'100px', height:'25px'}, 'fast') .animate({left:'50%',marginLeft:'-50px',top:'50px'}, 1000) .fadeTo(1000, 1.0, function() { start = false; }); } }); }); </script> </html> Exemplo 2 - SlideShow (1/3) // slideShow.js (function($){ $.fn.slideShow = function(settings){ var config = {'delay': 2000, 'fadeSpeed': 500}; $.extend(config, settings); var img = this.children('img'); var count = img.length; var i = 0; 120 var i = 0; img.eq(0).show(); setInterval(function(){ img.eq(i++).hide(config.fadeSpeed); if(i==count) i=0; img.eq(i).show(config.fadeSpeed); }, config.delay); return this; }; })(jQuery); Exemplo 2 - SlideShow (2/3) <style> #slideshow img { position: absolute; display: none; width: 300px; height: 200px; top: 50px; left: 50%; margin-left: -150px; 121 margin-left: -150px; } </style> <body> <div id="slideshow"> <img src="../img/image1.png" /> <img src="../img/image2.png" /> <img src="../img/image3.png" /> <img src="../img/image4.png" /> </div> </body> Exemplo 2 - SlideShow (3/3) <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="slideShow.js"></script> <script> $(window).load(function() { $('#slideshow').slideShow(); }); </script> 122 </script> </html> Note que o código do plugin foi colocado em arquivo separado, o que permite fazer reuso Exemplo 3 - Accordion (1/4) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>jQuery Accordion</title> <style> .accordion { position: absolute; 123 position: absolute; width: 300px; height: 345px; top: 50px; left: 50%; margin-left: -150px; padding-bottom: 3px; border: 1px dotted #666; background: #CCC; } Exemplo 3 - Accordion (2/4) .titulo { border: 1px solid #666; background: #BBB; margin: 4px 3px 0px 3px; } .conteudo { height: 265px; 124 height: 265px; padding: 0px 8px 3px 8px; display: none; overflow-y: auto; } p { margin-top: 2px; } </style> Exemplo 3 - Accordion (3/4) <body> <div class="accordion"> <div class="titulo">HTML</div> <div class="conteudo"> <p>HTML é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.</p> </div> <div class="titulo">CSS</div> <div class="conteudo"> 125 <div class="conteudo"> <p>CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo e posicionamentos.</p> </div> <div class="titulo">JQUERY</div> <div class="conteudo"> <p>jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML.</p> </div> </div> </body> Exemplo 3 - Accordion (4/4) <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script> $(document).ready(function() { $('.conteudo').eq(0).css('display','block'); $('.titulo').click(function() { $('.conteudo').slideUp('fast'); $(this).next().slideDown(); }); 126 }); }); </script> </html> Exemplo 4 – WindowModal (1/4) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Janela Modal</title> <style> #janela{ display: none; width: 300px; position: absolute; left: 0; 127 left: 0; top: 0; background: #FFF; z-index: 9900; padding: 5px 5px 5px 15px; border-radius: 10px; } #fechar{ display:block; float: right; cursor: pointer; width: 28px; height: 28px; } Exemplo 4 – WindowModal (2/4) #mascara{ display:none; position: absolute; left: 0; top: 0; z-index: 9000; background-color: #000; opacity: 0.6; } 128 #titulo { font-family: Verdana, Arial; font-size: 24px; font-weight: bold; margin-top: 1px; margin-bottom: -7px; } </style> </head> <body> <div id="mascara"></div> <input type="button" value="Modal" id="btnModal" />Exemplo 4 – WindowModal (3/4) <div id="janela"> <img src="../img/close.png" id="fechar" /> <p id="titulo">Janela Modal</p> <p>A criação de janela tipo modal é feita através uma camada transparente que ocupa toda a janela do browser.</p> <p>Depois é exibido um box com o texto da janela modal sobre essa camada. </p> </div> </body> <script src="../jquery/jquery-2.0.3.js"></script> 129 <script src="../jquery/jquery-2.0.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#btnModal').click( function(){ $('#janela').modalShow(); }); $('#fechar, #mascara').click(function(){ $('#janela').modalHide(); }); $(window).resize(function() { $('#janela').modalResize(); }); Exemplo 4 – WindowModal (4/4) $.fn.modalShow = function() { largura = $(window).width(); altura = $(window).height(); horizontal = (largura/2) - ($(this).width()/2); vertical = (altura/2) - ($(this).height()/2); $('#mascara').css({'width':largura, 'height':altura}); $('#mascara').fadeIn('fast'); $(this).css({'top':vertical, 'left':horizontal}).show(); }; 130 }; $.fn.modalHide = function() { $(this).hide(); $('#mascara').fadeOut('fast'); }; $.fn.modalResize = function() { if($('#mascara').css('display')=='block') { $(this).modalShow(); } }; }); </script> </html> Exemplos de plugins prontos � http://buildinternet.com/project/supersized/slideshow/3.2/demo.html � http://johnpolacek.github.io/superscrollorama/ � http://jquery.malsup.com/cycle/ � http://www.jacklmoore.com/colorbox/example1/ � http://razorjack.net/quicksand/ � http://www.smartmenus.org/ � http://www.jssor.com/ � http://tympanus.net/codrops/2011/04/28/rotating-image-slider/ � http://tympanus.net/Tutorials/ParallaxSlider/ � http://www.starplugins.com/cloudzoom 131 Trabalho � Pesquisar um plugin jQuery, entender seu funcionamento e criar uma página que faça e criar uma página que faça uso desse plugin. 132 AJAX 133 AJAX � AJAX (acrônimo de Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por browsers, para tornar páginas web mais interativas com o usuário, utilizando-se de solicitações assíncronas usuário, utilizando-se de solicitações assíncronas de informações ao servidor. � Os três princípios de Ajax: � O navegador hospeda uma aplicação e não conteúdo � O servidor fornece dados e não conteúdo � A interação do usuário com a aplicação é flexível e contínua 134 Requisição HTTP: Normal x AJAX 135 Ajax sem jQuery � Até pouco tempo atrás, para utilizar técnicas AJAX eram necessários conhecimentos sobre o método XMLHttpRequest.XMLHttpRequest. � Isso resultava em enormes funções escritas em Javascript e muito trabalho ao desenvolvedor. 136 conteudo.php <?php sleep(1); //aguardar 1 segundo @$key = $_REQUEST['key']; if(empty($key)) echo 'Requisição Ajax!'; elseelse echo 'Valor enviado ao servidor: '. $key; ?> 137 Obs.1: O valor recebido pelo servidor poderia, por exemplo, ser utilizado como parâmetro a uma consulta ao banco de dados. Obs.2: A partir de agora, trabalharemos com PHP, portanto, é necessário iniciar o servidor Apache. Ajax sem jQuery (1/3) <!-- ajax.html --> <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Ajax (sem jQuery)</title> <script src="ajax.js"></script><script src="ajax.js"></script> </head> <body> <input type = "button" value = "Carregar" id = "btnCarregar" onclick = "ajax('conteudo.php','destino');"> <div id="destino"></div> </body> </html> 138 Ajax sem jQuery (2/3) <!-- ajax.js --> var id; function ajax(url,local) { id = local; req = null; // Procura por um objeto nativo (Mozilla/Safari) if (window.XMLHttpRequest) { document.getElementById(id).innerHTML = '<img src="wait.gif">'; req = new XMLHttpRequest(); req.onreadystatechange = processarRequest;req.onreadystatechange = processarRequest; req.open("GET",url,true); req.send(null); } // Procura por uma versão ActiveX (IE) else if (window.ActiveXObject) { document.getElementById(id).innerHTML = '<img src="wait.gif">'; req = new ActiveXObject("Microsoft.XMLHTTP"); req.onreadystatechange = processarRequest; req.open("GET",url,true); req.send(); } } 139 Ajax sem jQuery (3/3) function processarRequest(){ if (req.readyState == 4){ // apenas quando estiver "completo“ if (req.status == 200){ // apenas se o servidor retornar "OK“ // procura pela div id="id" e insere o conteúdo como HTML document.getElementById(id).innerHTML = req.responseText; } else{ alert("Problema ao obter os dados: " + req.statusText); } } } 140 Ajax com jQuery � Hoje, podemos utilizar bibliotecas como o jQuery para tornar o trabalho com AJAX muito simples. � Por ser cross-browser, não há necessidade de nenhum tratamento adicional para qualquer navegador. 141 Métodos jQuery para AJAX � load � Método simples, usado para carregar conteúdos num seletor, com poucos tratamentos adicionais. � get � Usado para requisições com GET.� Usado para requisições com GET. � post � Usado para requisições com POST. � ajax � Método mais geral e flexível (permite GET ou POST) para manipular os resultados retornados. 142 Método $load() � O método $load() executa uma requisição Ajax com o servidor. � Sintaxe:� Sintaxe: � $load(url, [data], [callback]) � url - a ser carregada � data – dados enviados ao servidor (opcional) � callback – função executada após o retorno da requisição (opcional) 143 Ajax com jQuery – load() <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Ajax (com jQuery)</title> </head> <body> <input type="button" value="Carregar" id="btnCarregar"> 144 <input type="button" value="Carregar" id="btnCarregar"> <div id="destino"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#btnCarregar').click(function(){ $('#destino').load("conteudo.php"); }); </script> </html> Podem ser carregados arquivos .html, .php, .xml, .txt, ... Enviando parâmetros – load() <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> </head> <body> <input type="button" value="Carregar" id="btnCarregar"> <div id="destino"></div> 145 <div id="destino"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#btnCarregar').click(function(){ $('#destino').load('conteudo.php', {'key': 'jQuery'}); }); </script> </html> Será enviado ao servidor uma chave ‘key’ com valor ‘jQuery’ Parâmetro por variável – load() ... <input type="text" name="key" id="key" /> <input type="button" value="Carregar" id="btnCarregar" /> <div id="destino"></div> 146 ... <script> $('#btnCarregar').click(function(){ $('#destino').load('conteudo.php',{'key':$('#key').val()}); }); </script> Será enviado ao servidor uma chave ‘key’ com valor ‘jQuery’ Tratando callback - load() ... <script> $('#btnCarregar').click(function(){ $('#destino').load('c.html', function(response, status, xhr){ if(status == 'error'){ 147 if(status == 'error'){ $(this).html('ERRO: '+ xhr.status +' '+ xhr.statusText); } }); }); </script> Um erro acontecerá se o arquivo c.html não existir. Exercício � Modificar o exemplo de envio de parâmetro ao servidor por ajax de forma que o botão “Carregar” seja desabilitado durante o processamento da requisição. � Ou seja, após ser clicado, o botão deve ser desativado � Ou seja, após ser clicado, o botão deve ser desativado e deverá ficar ativo novamente somente após o término da chamada da função load (callback). � Isso impediráque o usuário clique novamente no botão enquanto a requisição estiver sendo processada. � Uma ampulheta deve ser exibida durante o processamento da requisição. 148 Menu � Objetivo: � Criar um menu que carregue os conteúdos da página. 149 � Criar um menu que carregue os conteúdos da página. � Requisitos: � Usar Ajax para que a página não seja recarregada. � Pegar o link a ser carregado diretamente no atributo href da tag <a>. Menu com Ajax – load() <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Menu usando Ajax</title> </head> <body> <a class="menu_item" href="pagina1.html">Página 1</a> | <a class="menu_item" href="pagina2.html">Página 2</a> | 150 <a class="menu_item" href="pagina3.html">Página 3</a> <div id="content"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('.menu_item').click(function(){ var url = $(this).attr('href'); $('#content').load(url); return false; }); </script> </html> Exemplo de menu 151 Menu com Ajax (1/2) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <div id="container"> <div id="mainpic"> 152 <h1>RIA<span class="lighter"> by AJAX</span></h1> <h2>Rich Internet Application</h2> </div> <div id="menu"> <a class="menu_item" href="ajax.htm">AJAX</a> <a class="menu_item" href="html.htm">HTML</a> <a class="menu_item" href="css.htm">CSS</a> <a class="menu_item" href="jquery.htm">jQuery</a> <a class="menu_item" href="xml.htm">XML</a> <a class="menu_item" href="php.htm">PHP</a> </div> <div id="content"></div> Menu com Ajax (2/2) </div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> // carregar o primeiro item do menu automaticamente $('#content').load($('.menu_item').eq(0).attr('href')); $('.menu_item').click(function(){ 153 $('.menu_item').click(function(){ var url = $(this).attr('href'); $('#content').load(url, function(r,s,x) { if(s=='error') $('#content').html('<p>Erro na página: '+url+'</p>'); }); return false; }); </script> </html> Frase do Dia � Objetivo: � Criar um módulo para apresentar rotativamente uma frase do dia.� Criar um módulo para apresentar rotativamente uma frase do dia. � Requisitos: � Selecionar e apresentar uma frase aleatoriamente. � Todas as frases deverão estar cadastradas no banco de dados. Banco de Dados Tabela tb_frase CREATE TABLE IF NOT EXISTS tb_frase ( id integer not null auto_increment, descricao varchar(140), PRIMARY KEY(id) ); Banco de Dados db_curso CREATE DATABASE IF NOT EXISTS db_aula; USE db_aula; INSERIR frases INSERT INTO tb_frase(descricao) VALUES ('O sucesso vem antes do trabalho somente no dicionário.'), ('No final tudo dá certo. Se ainda não deu certo, é que ainda não chegou ao fim.'), ('Você é tão jovem quanto a sua autoconfiança, tão idoso quanto seu medo, tão moço quanto suas esperanças e tão velho quanto seu desespero.'), ('Os vencedores fazem aquilo que os perdedores não querem fazer.'), ('Se você quer ter um amigo, você precisar ser um amigo.'), ('A esperança é a última que morre.'), ('A experiência é o sabor da vida.'), ('Não diga para Deus o tamanho do seu problema. Fale ao seu problema o tamanho de seu Deus.'); COMMIT; frase.php <!-- frase.php --> <?php $link = mysqli_connect("127.0.0.1", "root", "", "db_aula"); $sql = "SELECT descricao FROM tb_frase ORDER BY RAND() ORDER BY RAND() LIMIT 0,1"; $rs = mysqli_query($link, $sql); $r = mysqli_fetch_array($rs); $frase = $r['descricao']; mysqli_close($link); echo utf8_encode($frase); ?> frase.css #frase { background: #9AC0CD; border: 1px solid #68838B; width:300px; height:65px; height:65px; padding:5px 5px 5px 5px; overflow-y: auto; text-align: center; font-family: verdana; display: none; } 157 frase.html <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Frase do Dia</title> <link rel="stylesheet" href="frase.css" /> </head> <body> <div id="frase"></div> 158 <div id="frase"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $(document).ready(function(){ $('#frase').load('frase.php', function() { $(this).show(); }); }); </script> </html> Atualizar frase por click $(document).ready(function(){ $('#frase').load('frase.php', function() { $(this).slideDown(1000); }); $('#frase').click(function() { 159 $(this).slideUp(1000, function() { $(this).load('frase.php', function() { $(this).slideDown(1000); }); }); }); }); Atualizar frase por timer $(document).ready(function(){ $('#frase').load('frase.php', function() { $(this).fadeIn(1000); }); setInterval(function(){ 160 $('#frase').fadeOut(500, function() { $(this).load('frase.php', function() { $(this).fadeIn(1000); }); }); }, 5*1000); }); Método $.get() � O método $.get() carrega dados do servidor usando uma requisição GET HTTP. � Sintaxe: � $.get(url, [data], [callback], [type]) Retorna um objetoXMLHttpRequest 161 Parâmetros $.get() � url: Uma string contendo a URL para a qual a requisição será enviada. � data: Parâmetro (opcional) que representa o par chave/valor que será enviado ao servidor. � callback: Parâmetro (opcional) que representa uma função a ser executada após os dados serem carregados com sucesso. � type: Parâmetro (opcional) que representa o tipo de dado a ser retornado para a chamada. � "xml", "html", "script", "json", "jsonp", "text" 162 Exemplo $.get() <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Método $.get()</title> </head> <body> <input type="button" value="Carregar" id="btnCarregar"> <div id="destino"></div> 163 <div id="destino"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#btnCarregar').click(function(){ $.get("conteudo.php", function(d) { $('#destino').html(d); }); }); </script> </html> $.get() – envio de parâmetro <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Método $.get()</title> </head> <body> <input type="button" value="Carregar" id="btnCarregar"> <div id="destino"></div> 164 <div id="destino"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $('#btnCarregar').click(function(){ $.get("conteudo.php", {key: "jQuery"}, function(d) { $('#destino').html(d); }); }); </script> </html> $.get() – envio de parâmetro (cont.) ... <input type="text" name="txtNome" id="txtNome"> ... <script> $('#btnCarregar').click(function(){ $.get("conteudo.php", {key:$('#txtNome').val()}, function(d) { 165 $.get("conteudo.php", {key:$('#txtNome').val()}, function(d) { $('#destino').html(d); }); }); </script> {nome:$('input').attr('name','txtNome').val()}Alternativo: Outros métodos de callback � Além da função padrão de callback, existem, ainda alguns métodos adicionais para tratamento do retorno: � .done – disparado em caso de sucesso� .done – disparado em caso de sucesso � .fail – disparado em caso de falha � .always – disparado ao final do processo � Os métodos .success(), .error() e .complete(), introduzidos na versão jQuery 1.5, estão obsoletos (deprecated) a partir da versão 1.8. 166 Tratamento de callback - $.get() <script> $('#btnCarregar').click(function(){ $.get("conteudo.php") .done(function(d) { $('#destino').html(d); $('#destino').append("<br />done" ); 167 }) .fail(function(code) { $('#destino').append("<br />fail" ); }) .always(function() { $('#destino').append("<br/>always" ); }); }); </script> Experimente colocar uma URL inexistente para provocar um erro Ajax com Banco de Dados Consulta dados no banco de dados Cadastro através de formulário Banco de Dados - Estrutura Tabela CONTATO CREATE TABLE IF NOT EXISTS tb_contato( Banco de Dados CREATE DATABASE IF NOT EXISTS db_aula; USE db_aula; cod_cont integer not null auto_increment, nome varchar(50), endereco varchar(60), cidade varchar(40), fone varchar(15), data_nasc date, PRIMARY KEY(cod_cont) ); 169 Banco de Dados - INSERT Inclusão de dados INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Ariana','Rua da Glória,12','Lins','(14) 3533-1234','1972-03-20'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Danilo','R. 7 Setembro,55','Bilac','(18) 3523-0022','1973-05-15'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Flavia','Av.Saudade,275','Birigui','(18) 532-3344','1980-12-25'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Henrique','R. das Flores,99','Birigui','(18) 3523-9999','1984-01-05'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Rafael','R. das Flores,66','Lins','(14) 3523-8888','1987-01-06'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Robson','Av. Saudade, 25','Araçatuba','(18) 523-3535','1980-01-15'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Samara','R. Rio Claro,45','São Paulo','(11) 3523-9999','1990-02-05'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Thiago','R. da Freguesia,6','Birigui','(18) 3523-9009','1989-08-05'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Vinicius','R. Cotia,122','Lins','(14) 3523-1234','1986-10-05'); INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('Vitor','R. Antonio Simões,4','Pongaí','(14) 3523-8080','1984-12-12'); COMMIT; 170OBS.: É possível, também, fazer a inclusão diretamente através do PHP Consulta com Ajax (consulta.html) <!doctype html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Consulta com Ajax</title> </head> 171 </head> <body> <input type="text" name="txtNome" id="txtNome"> <input type="button" value="Filtrar" id="btnCarregar"> <div id="destino"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> Consulta com Ajax (consulta.html) <script> $(document).ready(function(){ $('#btnCarregar').click(function(){ $(this).prop('disabled', true); $.get("consulta.php", {filtro: $('#txtNome').val()}, .done(function(d) { $('#destino').html(d); }) 172 }) .fail(function(code) { $('#destino').html("<br />Erro ao consultar!" ); }) .always(function() { $('#btnCarregar').prop('disabled', false); }); }); }); </script> </html> Consulta com Ajax (consulta.php) <?php @$filtro = addslashes($_GET['filtro']); $link = mysqli_connect("127.0.0.1", "root", "", "db_aula"); $sql = "SELECT nome, endereco, cidade, fone, data_nasc FROM tb_contato WHERE nome LIKE '$filtro%'"; $rs = mysqli_query($link, $sql); if(empty($rs) OR mysqli_num_rows($rs)==0) { 173 if(empty($rs) OR mysqli_num_rows($rs)==0) { echo "Nenhum registro localizado!"; } else { while($r = mysqli_fetch_array($rs)){ echo "{$r[0]} | {$r[1]} | {$r[2]} | {$r[3]} | {$r[4]} <br>"; } mysqli_free_result($rs); } mysqli_close($link); ?> Consulta com Ajax Consultar contatos no banco de dados sem pressionar <enter>. A pesquisa é atualizada cada tecla pressionada. Consulta com Ajax (consulta.html) <!doctype html> <html lang="pt-BR"> <head><meta charset="UTF-8" /></head> <body> <input type="text" id="txtBusca" /> <div id="resultado"></div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script> $(document).ready(function(){ 175 $("#txtBusca").keyup(function(e){ $.get( "consulta.php", { filtro: $("input").val() }, function(result){ $("#resultado").html(result); } ); }); }); </script> </html> OBS.: Nenhuma mudança é necessário na programação PHP Tratando caracteres de controle $(document).ready(function(){ $("#txtBusca").keyup(function(e){ var code = (e.keyCode ? e.keyCode : e.which); var specialsKeys = new Array(13,16,17,18,20,27,33,34,35,36,37,38,39,40); if(specialsKeys.indexOf(code)>=0) return false; $.get( 176 $.get( "consulta.php", { filtro: $("input").val() }, function(result){ $("#resultado").html(result); } ); }); }); OBS.: Trata o browser utilizado e teclas especiais (enter, page up, end, ...) Cadastro com Formulário Os dados serão enviados ao servidor, que irá gravar no banco e retornar o status, irá gravar no banco e retornar o status, sem recarregar o formulário. cadastro.html <!doctype html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="cadastro.css" /> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script src="cadastro.js"></script> </head> <body> <form method="GET" action="#" name="form"> 178 <form method="GET" action="#" name="form"> <fieldset id="campos"> <legend>Cadastro de Contato</legend> <label>Nome:</label><input type="text" name="nome" /> <label>Endereço:</label><input type="text" name="endereco" /> <label>Cidade:</label><input type="text" name="cidade" /> <label>Fone:</label><input type="text" name="fone" /> <label>Dt.Nasc.:</label><input type="text" name="data_nasc" /> <input type="button" value="Enviar" id="enviar" /> </fieldset> </form> <div id="resposta"></div> </body> </html> cadastro.css fieldset { width: 300px; } input[type="text"], input[type="date"] { float: right; width: 200px; height: 14px; margin-top: 2px; } input[type="text"]:focus, input[type="date"]:focus { background-color: #D1EEEE; 179 } input[type="button"] { clear: both; float: right; margin-top: 5px; } label { float: left; height: 22px; width: 80px; } #resposta { width: 300px; text-align: center; } cadastro.js $(document).ready(function() { $('#enviar').click(function() { $(this).prop('disabled', true); $.get('cadastro.php', { nome: $("input[name='nome']").val(), endereco: $("input[name='endereco']").val(), cidade: $("input[name='cidade']").val(), fone: $("input[name='fone']").val(), 180 fone: $("input[name='fone']").val(), data_nasc: $("input[name='data_nasc']").val() }, function(data){ $('#resposta').html(data); $('#enviar').prop('disabled', false); }, "html" ); }); }); Modo alternativo: $("form").serialize() cadastro.php <?php @$nome = $_GET["nome"]; @$endereco = $_GET["endereco"]; @$cidade = $_GET["cidade"]; @$fone = $_GET["fone"]; @$data_nasc = $_GET["data_nasc"]; if(empty($nome) OR empty($endereco) OR empty($cidade) OR empty($fone) OR empty($data_nasc)) { $msg = "Todos os campos devem ser preenchidos!"; 181 $msg = "Todos os campos devem ser preenchidos!"; } else { $link = mysqli_connect("127.0.0.1","root","","db_aula"); $sql = "INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc) VALUES('$nome','$endereco','$cidade','$fone','$data_nasc')"; $status = mysqli_query($link,$sql); mysqli_close($link); $msg = ($status==1) ?"Sucesso ao inserir!" :"Erro ao inserir!"; } echo $msg; ?> Método $.post() � O método $.post() carrega dados do servidor usando uma requisição POST HTTP. � Sintaxe:� Sintaxe: � $.post(url, [data], [callback], [type]) � Realiza as mesmas tarefas que $.get(), mas oferece mais segurança. � O método $.post nunca utiliza dados do cache. 182 Controle de Acesso login.html <!doctype html><html lang="pt-BR"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="login.css" /> </head> <body> <div id="content"> <form id="formLogin" name="formLogin" action="login.php"> 184 <form id="formLogin" name="formLogin" action="login.php"> <label>Usuário:</label><input type="text" name="username" /> <label>Senha:</label><input type="password" name="password" /> <input type="submit" id="btnLogin" value="Conectar" /> </form> <div id="message"></div> </div> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script src="login.js"></script> </html> login.css body, input { font-family: 'Times New Roman'; font-size: 18px; } .success { color: #060; } .error { color: #F00; } 185 } #content { background-color: #eee; width: 250px; margin: 0 auto; border: 1px solid #aaa; padding: 15px; border-radius: 10px; } #formLogin input[type=text], #formLogin input[type=password] { width: 245px; margin-bottom: 15px; } login.js $(document).ready(function() { $('#btnLogin').click(function() { $.post( $('#formLogin').attr('action'), $('#formLogin').serialize(), function(response){ if(response == 'success') $('#formLogin').slideUp('slow', function() { 186 $('#message').html("<p class='success'> Sucesso!</p>"); }); else $('#message').html("<p class='error'> Usuário e/ou senha inválidos.</p>"); } ); return false; }); }); login.php <?php $username = $_POST['username']; $password = $_POST['password']; 187 $password = $_POST['password']; if($username=='jquery' AND $password=='ajax') { echo 'success'; } ?> obs.: Para simplificar, não foi usado banco de dados Combos sincronizados Banco de Dados - Estrutura Tabela CONTATO CREATE TABLE IF NOT EXISTS tb_estado ( sigla char(2) not null PRIMARY KEY, Banco de Dados CREATE DATABASE IF NOT EXISTS db_aula; USE db_aula; sigla char(2) not null PRIMARY KEY, nome varchar(40) ); CREATE TABLE IF NOT EXISTS tb_cidade ( id integer not null auto_increment PRIMARY KEY, sigla char(2) not null, nome varchar(60), FOREIGN KEY(sigla) REFERENCES tb_estado(sigla) ); 189 Banco de Dados - INSERT Inclusão de dados INSERT INTO tb_estado(sigla, nome) VALUES ('SP','São Paulo'), ('RJ','Rio de Janeiro'), ('MG','Minas Gerais'); INSERT INTO tb_cidade(sigla, nome) VALUES ('SP','São Paulo'), ('SP','Lins'), ('SP','Piracicaba'), ('SP','Araçatuba'),('SP','Araçatuba'), ('SP','Birigui'), ('SP','Bilac'), ('SP','Cafelândia'), ('SP','Pongaí'), ('RJ','Rio de Janeiro'), ('RJ','Buzios'), ('RJ','Campos'), ('MG','Belo Horizonte'), ('MG','Poços de Caldas'), ('MG','Uberaba'); COMMIT; 190OBS.: É possível, também, fazer a inclusão diretamente através do PHP combo.html <!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <style> select { width: 150px; } </head> <body> 191 <body> <form> <select name="estado"></select> <select name="cidade"></select> </form> </body> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script src="combo.js"></script> </html> combo.js $(document).ready(function(){ $.post('estado.php', function(r) { $('select[name=estado]').html(r); }); 192 $('select[name=estado]').change(function() { $.post('cidade.php', {'sigla': $(this).val()}, function(r){ $('select[name=cidade]').html(r); }); }); }); combo.js (com tratamento) $(document).ready(function(){ $('select[name=estado]').prop('disabled', true); $('select[name=cidade]').prop('disabled', true); $.post('estado.php', function(r) { $('select[name=estado]').html(r); $('select[name=estado]').prop('disabled', false); }); 193 }); $('select[name=estado]').change(function() { $('select[name=cidade]').prop('disabled', true); $.post('cidade.php', { 'sigla': $(this).val() }, function(r){ $('select[name=cidade]').html(r); $('select[name=cidade]').prop('disabled', false); }); }); }); estado.php <?php $link = mysqli_connect("127.0.0.1", "root", "", "db_aula"); $sql = "SELECT sigla, nome FROM tb_estado"; $rs = mysqli_query($link, $sql); if(!empty($rs) AND mysqli_num_rows($rs)>0) { while($r = mysqli_fetch_array($rs)){ 194 while($r = mysqli_fetch_array($rs)){ echo '<option value="'.$r['sigla'].'">'.$r['nome'].'</option>'; } mysqli_free_result($rs); } mysqli_close($link); ?> cidade.php <?php @$sigla = $_POST['sigla']; $link = mysqli_connect("127.0.0.1", "root", "", "db_aula"); $sql = "SELECT id, nome FROM tb_cidade WHERE sigla = '$sigla'"; $rs = mysqli_query($link, $sql); 195 $rs = mysqli_query($link, $sql); if(!empty($rs) AND mysqli_num_rows($rs)>0) { while($r = mysqli_fetch_array($rs)){ echo '<option value="'.$r['id'].'">'.$r['nome'].'</option>'; } mysqli_free_result($rs); } mysqli_close($link); ?> Método $ajax() � $ajax é o método mais flexível oferecido pelo jQuery para requisições AJAX. � Permite tanto GET quanto POST� Permite tanto GET quanto POST � Parâmetros: � url, data, async, beforeSend, cache, contentType, context, data, dataFilter, dataType, error, processData, timeout, type, xhr, ... 196 JSON � Acrônimo de“JavaScript Object Notation“ � Formato leve para intercâmbio de dados computacionais. � JSON é uma alternativa ao XML� JSON é uma alternativa ao XML � Permite quatro tipos de valores: � Inteiros � Strings � Boolean � Array 197 JSON - exemplos "cliente":[ {"nome": "João", "idade": 25, "sexo": "M"}, {"nome": "José", "idade": 22, "sexo": "M"}, {"nome": "Maria", "idade": 19, "sexo": "F"} ] 198 { "cliente": [ {"nome": "João", "idade": 25, "sexo": "M"}, {"nome": "José", "idade": 22, "sexo": "M"}, {"nome": "Maria", "idade": 19, "sexo": "F"} ], "total": 3 } Os espaços em branco e <enter> são desconsiderados Enquete Eletrônica � Objetivo: � Criar um site no qual os visitantes poderão votar em sua preferência e acompanhar o resultado da enquete. � Requisitos: � As opções da pesquisa serão inseridas diretamente no banco de dados. � Para cada opção deve-se ter um id, a descrição e o número de votos. � Qualquer visitante poderá votar e, em seguida, ver os resultados. Banco de Dados Tabela tb_enquete CREATE TABLE IF NOT EXISTS tb_enquete ( id integer not null auto_increment, opcao varchar(60), Banco de Dados db_aula CREATE DATABASE IF NOT EXISTS db_aula; USE db_aula; opcao varchar(60), votos integer default 0, PRIMARY KEY(id) ); Inclusão de dados INSERT INTO tb_enquete(opcao) VALUES ('SIM, Ajax com jQuery é fantástico!'), ('NÃO, existem outros frameworks melhores.'), ('TALVEZ, ainda não conheço o suficiente.'); COMMIT; Layout de telas – Enquete enquete.html <!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Enquete com jQuery</title> <link rel="stylesheet" href="enquete.css" /> </head> <body> <div id="content"> <img src="../img/load.gif" id="load" /> <div id="enquete"></div> </div> </body> <script src="../jquery/jquery-2.0.3.js"></script> <script src="enquete.js"></script> </html> enquete.css #content { position: absolute; top: 100px; left: 50%; width: 450px; margin-left: -225px; } #load { position: absolute; display: none; left: 50%; top: 50px; .opcao, .resultado { width: 96%; height: 40px; padding: 5px; margin-bottom: 5px; background: #CAE1FF; border: #6E7B8B 1px solid; clear: both; } .opcao:hover { cursor: pointer; top: 50px; width: 40px; height: 40px; margin-left: -20px; } #enquete { display: none; } .grafico { float: left; background: #4682B4; height: 16px; margin-top: 3px; clear: both; } background: #4682B4; } .votos { float: right; color: #666; } .percentual { float: left;
Compartilhar