Jquery - Apresentação e aplicação prática

1,566 views

Published on

Uma apresen

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,566
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jquery - Apresentação e aplicação prática

  1. 1. jQuery David R. Lopes J. Teles Maciel Jovan Ângelo Paulo A . França
  2. 2. Introdução <ul><li>Framework Javascript ;
  3. 3. Nasceu em 2005;
  4. 4. Licença: MIT ou GPL ;
  5. 5. Não é o único framework javascript; </li></ul>Tema: Write Less, Do More
  6. 6. Para que serve: <ul><li>Resolução da incompatibilidade entre os navegadores.
  7. 7. Redução de código.
  8. 8. Reutilização do código através de plugins.
  9. 9. Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
  10. 10. Trabalha com AJAX e DOM .
  11. 11. Implementação segura de recursos do CSS1 , CSS2 e CSS3 . </li></ul>Texto integralmente retirado de http://pt.wikipedia.org/wiki/JQuery
  12. 12. Quanto &quot;pesa&quot; um framework? <ul><li>O framework Jquery na sua versão 1.4 (minificado) pesa 24kb !
  13. 13. Para seu projeto você pode baixar o Jquery em : www.jquery.com ou importar a biblioteca diretamente do Google, deste modo: </li></ul><script src= &quot; http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js &quot; type= &quot; text/javascript &quot; ></script>
  14. 14. O que você precisa saber pra começar? <ul><li>Você tem que ter o DOM (carregado) pra usar jQuery;
  15. 15. XHTML e Javascript ;
  16. 16. Seletores CSS2 e CSS3 (já são previstos no jQuery) podem te ajudar! </li></ul>jQuery é fácil: A biblioteca se baseia na chamada de apenas uma função e tem 24kb. Vamos por a mão na massa?
  17. 17. Esquentando com “Hello World” <ul><li>Baixe a mais nova versão do JQuery, atualmente 1.4.2;
  18. 18. Crie um arquivo teste.html;
  19. 19. Coloque o jquery-1.4.2.js no mesmo diretório do teste.html e importe a biblioteca; </li></ul>
  20. 20. Esquentando com “Hello World”
  21. 21. Esquentando com “Hello World”
  22. 22. Explicando o código $( &quot;a&quot; ) é um Selector do jQuery que seleciona elementos &quot;a&quot; O $ é como se assemelha a uma &quot;classe&quot; em jQuery $() portanto &quot;instancia&quot; um objeto jQuery .click() é invocado quando ocorre um click do mouse em um elemento selecionado; O código sem jQuery: Separação de JS e HTML ! Eliminação de código redundante! <3 jQuery.
  23. 23. Agora cumpriremos uma missão em jQuery
  24. 24. Baixamos o site fatecsjc.edu.br usando wget e iremos aplicar alterações nele via jQuery para que mais meninas se interessem por nossa faculdade: Eis o site baixado: Missão 1: Mudar o site da fatecsjc
  25. 25. Missão 1: Mudar o site da fatecsjc + = ... alteracoes .js
  26. 26. Missão cumprida. Vamos ver o novo leiaute
  27. 27. Novo leiaute
  28. 28. Explicando o código.
  29. 29. Jquery é mais que manipulação do DOM Jquery tem diversas outras potencialidades: <ul><li>Ajax simplificado:
  30. 30. Métodos $.ajax , $.getJSON , $.get e etc...
  31. 31. Garantia de funcionar nos mais diversos navegadores;
  32. 32. Documentação extensa e atualizada;
  33. 33. Comunidade forte e muitos entusiastas;
  34. 34. Utilizado em muitos sites famosos como Google Search, IBM.com , Mozzila.com , etc..;
  35. 35. Validação de formulários no cliente;
  36. 36. Muitos, muitos e muitos plugins. </li></ul>
  37. 37. Plugins ver jquerylist.com
  38. 38. Leitura recomendada <ul><li>Melhore seu código jQuery (25 dicas) [EN]
  39. 39. http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
  40. 40. 08 plugins jQuery que usam apis da Google(EN):
  41. 41. http://www.reynoldsftw.com/2009/03/8-jquery-plugins-that-utilize-google-apis/
  42. 42. 31 snippets de jQuery (EN):
  43. 43. http://addyosmani.com/blog/31-jquery-snippets/
  44. 44. Anatomia de um plugin jQuery
  45. 45. http://www.tableless.com.br/anatomia-de-um-plugin-jquery </li></ul>
  46. 46. Referências <ul><li>[1]http://docs.jquery.com/Main_Page;
  47. 47. [2]http://docs.jquery.com/Sites_Using_jQuery
  48. 48. [3]http://jquerylist.com/
  49. 49. [4]http://www.tutorialspoint.com/jquery/jquery-quick-guide.htm </li></ul>

×