Successfully reported this slideshow.
jQuery David  R. Lopes J.  Teles  Maciel Jovan  Ângelo Paulo  A . França
Introdução <ul><li>Framework  Javascript ;
Nasceu em 2005;
Licença:  MIT  ou  GPL ;
Não é o único framework javascript; </li></ul>Tema: Write Less, Do More
Para que serve: <ul><li>Resolução da incompatibilidade entre os navegadores.
Redução de código.
Reutilização do código através de plugins.
Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
Trabalha com  AJAX  e  DOM .
Implementação segura de recursos do  CSS1 ,  CSS2  e  CSS3 . </li></ul>Texto integralmente retirado de  http://pt.wikipedi...
Quanto &quot;pesa&quot; um framework? <ul><li>O framework Jquery na sua versão 1.4 (minificado) pesa  24kb !
Para seu projeto você pode baixar o Jquery em :  www.jquery.com  ou importar a biblioteca diretamente do Google, deste mod...
O que você precisa saber pra começar? <ul><li>Você tem que ter o  DOM  (carregado) pra usar jQuery;
XHTML  e  Javascript ;
Seletores  CSS2  e  CSS3  (já são previstos no jQuery) podem te ajudar!  </li></ul>jQuery é fácil: A biblioteca se baseia ...
Esquentando com  “Hello World”   <ul><li>Baixe a mais nova versão do JQuery, atualmente 1.4.2;
Crie um arquivo  teste.html;
Coloque o  jquery-1.4.2.js  no mesmo diretório do  teste.html  e importe a biblioteca; </li></ul>
Próximos SlideShares
Carregando em…5
×

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

1.585 visualizações

Publicada em

Uma apresen

  • Seja o primeiro a comentar

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>

×