Aula 05Wagner Silva
Agenda        Manipulando a exibição de objetos        Customizando animações com CSS        Enfileirando animações    ...
Manipulando a Exibição        seleção.fadeIn(tempo,função)              $(“div”).fadeIn(2000)Wagner Silva # Web 2.0 com ...
Manipulando a Exibição        seleção.show(tempo,função)              $(“div”).show(2000)Wagner Silva # Web 2.0 com Ajax...
Manipulando a Exibição        seleção.slideDown(tempo,função)              $(“div”).slideDown(2000)Wagner Silva # Web 2....
Manipulando a Exibição        seleção.fadeOut(tempo,função)              $(“div”).fadeOut(2000)Wagner Silva # Web 2.0 co...
Manipulando a Exibição        seleção.hide(tempo,função)              $(“div”).hide(2000)Wagner Silva # Web 2.0 com Ajax...
Manipulando a Exibição        seleção.slideUp(tempo,função)              $(“div”).slideUp(2000)Wagner Silva # Web 2.0 co...
Customizando com CSS        seleção.animate(propriedades,tempo,frequencia,função)        Somente propriedades numéricas ...
Customizando com CSS              $(“div”).fadeOut(2000)              $(“div”).animate({                    opacity : 0 ...
Customizando com CSS              $(“div”).hide(2000)              $(“div”).animate({                    height : 0,    ...
Customizando com CSS              $(“div”).slideUp(2000)              $(“div”).animate({                    height : 0, ...
Customizando com CSS        Propriedades podem possuir valores não numéricos:            propriedade : ‘show’           ...
Customizando com CSS        Os valores das propriedades não necessitam ser exatos:            propriedade : ‘+= valor’  ...
Enfileiramento        seleção.animação1.animação2. ... .animaçãonWagner Silva # Web 2.0 com Ajax                        A...
Delay        Atrasa a execução de animações enfileiradas              seleção.animação1.delay(tempo).animação2Wagner Sil...
Animação Exercício: Utilizar fadeIn e fadeOut para manipular a exibição dos emails.
Ajax        União de várias tecnologias        Interação dinâmica com usuário        Não há necessidade de recarregamen...
Wagner Silva # Web 2.0 com Ajax   Aula 05
Wagner Silva # Web 2.0 com Ajax   Aula 05
PHP        Linguagem de script server-side        Possui bibliotecas              Banco de dados              E-mail  ...
XmlHttpRequest        Criado pela Microsoft        Acessar/recuperar dados do servidor (assíncrona)        Pode retorna...
Conexão com JQuery        ajaxSetup() e ajax()        Principais propriedades:              async : booleano           ...
Métodos           $.get(ajax/teste.php,{},function(dados){               …           });           $.post(ajax/teste.php,{...
Ajax Exercício: manipular pastas e busca via Ajax
Web 2.0 com Ajax # Aula 05 Próxima Aula:   Manipulando funções através do Ajax. E-mail: web2softeam@gmail.com Twitter:...
Upcoming SlideShare
Loading in …5
×

Web 2.0 com Ajax: JQuery/PHP (Aula 05)

758 views
655 views

Published on

Treinamento ministrado para turma iniciante em 2011

Aula 05

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
758
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web 2.0 com Ajax: JQuery/PHP (Aula 05)

  1. 1. Aula 05Wagner Silva
  2. 2. Agenda  Manipulando a exibição de objetos  Customizando animações com CSS  Enfileirando animações  Aplicação de Delay  Ajax  Revisão: PHP e XMLHttpRequest  Conexões Síncronas e AssíncronasWagner Silva # Web 2.0 com Ajax Aula 05
  3. 3. Manipulando a Exibição  seleção.fadeIn(tempo,função)  $(“div”).fadeIn(2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  4. 4. Manipulando a Exibição  seleção.show(tempo,função)  $(“div”).show(2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  5. 5. Manipulando a Exibição  seleção.slideDown(tempo,função)  $(“div”).slideDown(2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  6. 6. Manipulando a Exibição  seleção.fadeOut(tempo,função)  $(“div”).fadeOut(2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  7. 7. Manipulando a Exibição  seleção.hide(tempo,função)  $(“div”).hide(2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  8. 8. Manipulando a Exibição  seleção.slideUp(tempo,função)  $(“div”).slideUp(2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  9. 9. Customizando com CSS  seleção.animate(propriedades,tempo,frequencia,função)  Somente propriedades numéricas são válidas  Frequência: swing ou linearWagner Silva # Web 2.0 com Ajax Aula 05
  10. 10. Customizando com CSS  $(“div”).fadeOut(2000)  $(“div”).animate({ opacity : 0 },2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  11. 11. Customizando com CSS  $(“div”).hide(2000)  $(“div”).animate({ height : 0, width : 0, marginTop : 0, marginLeft : 0 },2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  12. 12. Customizando com CSS  $(“div”).slideUp(2000)  $(“div”).animate({ height : 0, marginTop: 0 },2000)Wagner Silva # Web 2.0 com Ajax Aula 05
  13. 13. Customizando com CSS  Propriedades podem possuir valores não numéricos:  propriedade : ‘show’  propriedade : ‘hide’  propriedade : ‘toogle’Wagner Silva # Web 2.0 com Ajax Aula 05
  14. 14. Customizando com CSS  Os valores das propriedades não necessitam ser exatos:  propriedade : ‘+= valor’  propriedade : ‘-= valor ’Wagner Silva # Web 2.0 com Ajax Aula 05
  15. 15. Enfileiramento  seleção.animação1.animação2. ... .animaçãonWagner Silva # Web 2.0 com Ajax Aula 05
  16. 16. Delay  Atrasa a execução de animações enfileiradas  seleção.animação1.delay(tempo).animação2Wagner Silva # Web 2.0 com Ajax Aula 05
  17. 17. Animação Exercício: Utilizar fadeIn e fadeOut para manipular a exibição dos emails.
  18. 18. Ajax  União de várias tecnologias  Interação dinâmica com usuário  Não há necessidade de recarregamento  Compartilhamento de recursos  AcessibilidadeWagner Silva # Web 2.0 com Ajax Aula 05
  19. 19. Wagner Silva # Web 2.0 com Ajax Aula 05
  20. 20. Wagner Silva # Web 2.0 com Ajax Aula 05
  21. 21. PHP  Linguagem de script server-side  Possui bibliotecas  Banco de dados  E-mail  Imagens  Etc  Instalação, configuração e documentação: www.php.netWagner Silva # Web 2.0 com Ajax Aula 05
  22. 22. XmlHttpRequest  Criado pela Microsoft  Acessar/recuperar dados do servidor (assíncrona)  Pode retornar:  XML  Json  Texto  Imagem  etcWagner Silva # Web 2.0 com Ajax Aula 05
  23. 23. Conexão com JQuery  ajaxSetup() e ajax()  Principais propriedades:  async : booleano  data : mapeamento  statusCode : mapeamento  type : string (post/get)  success : função  url : stringWagner Silva # Web 2.0 com Ajax Aula 05
  24. 24. Métodos $.get(ajax/teste.php,{},function(dados){ … }); $.post(ajax/teste.php,{},function(dados){ ... });Wagner Silva # Web 2.0 com Ajax Aula 05
  25. 25. Ajax Exercício: manipular pastas e busca via Ajax
  26. 26. Web 2.0 com Ajax # Aula 05 Próxima Aula:  Manipulando funções através do Ajax. E-mail: web2softeam@gmail.com Twitter: twitter.com/web2softeam

×