Jquery  Framework Javascript paradesenvolvimento web poderoso e           dinâmico!
RealizaçãoWebLovers<%=  “Por  uma  Web  mais  apaixonante”  %>http://www.grupoweblovers.co.cc
Quem SomosAllyson Barros - @allysonbarrosGraduando em Análise e Desenvolvimento de Sistemas - IFRNEmpreendedor e Desenvolv...
Quem SomosDaniele Montenegro - @lelybarrosBacharel em Ciências Sociais pela UFRNGraduanda em Análise e Desenvolvimento de ...
Quem SomosElionai Moura - @eli_embitsGraduando em Análise e Desenvolvimento de Sistemas - IFRNEmpreendedor e Desenvolvedor...
Quem SomosGiancarlo Lima - @giancarlozeroGraduando em Análise e Desenvolvimento de Sistemas - IFRNIdealizador do Grupo Web...
O que é?jQuery é um framework para ajudar osdesenvolvedores a se concentrarem na lógicados sistemas da web e não nos probl...
Principais VantagensCompatibilidade entre os navegadores.Redução de código.Reutilização do código através de plugins.Utili...
It`s ShowTime! Ou melhor,        CodeTime!       http://www.liquisdesign.com/blog/wp-content/uploads/2010/04/             ...
Os primeiros passos!
Os primeiros passos!window.onload = function(){  alert("welcome");}Antes - Javascript Puro - Boring!$(document).ready(func...
Seletores de Elementos Outras Referências: http://api.jquery.com/category/selectors/ $(document) $(“*”) $(“#idElemento”) $...
Seletores de Elementos       Outras Referências: http://api.jquery.com/category/selectors/var element = document.getElemen...
Manipuladores de Eventos  Outras Referências: http://api.jquery.com/category/events/ .blur()                  .focusout() ...
Manipuladores de Eventos          Outras Referências: http://api.jquery.com/category/events/ function displayDate() {   al...
Manipuladores de Atributos Outras Referências: http://api.jquery.com/category/attributes/ .addClass()                     ...
Manipuladores de Elementos    Outras Referências: http://api.jquery.com/category/manipulation/.addClass()                 ...
Manipuladores de Efeitos     Outras Referências: http://api.jquery.com/category/effects/.animate()                 .fadeOu...
Perguntas?
Agradecimentos!
Confira o código completo dos       exemplos em: www.github.com/ grupoweblovers
Não deixem de se cadastrarem no    nosso grupo de estudos! www.grupoweblovers.co.cc
Obrigado!
Upcoming SlideShare
Loading in …5
×

Palestra - Iniciando no Jquery

1,284 views
1,236 views

Published on

Palestra realizada durante o 1º Workshop de Jquery no IFRN.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,284
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Palestra - Iniciando no Jquery

  1. 1. Jquery Framework Javascript paradesenvolvimento web poderoso e dinâmico!
  2. 2. RealizaçãoWebLovers<%=  “Por  uma  Web  mais  apaixonante”  %>http://www.grupoweblovers.co.cc
  3. 3. Quem SomosAllyson Barros - @allysonbarrosGraduando em Análise e Desenvolvimento de Sistemas - IFRNEmpreendedor e Desenvolvedor Rails da Actual SolutionsIdealizador do Grupo WebLovers - http://grupoweblovers.co.ccallysonbarrosrn@gmail.com - allyson_barros_irm@hotmail.com
  4. 4. Quem SomosDaniele Montenegro - @lelybarrosBacharel em Ciências Sociais pela UFRNGraduanda em Análise e Desenvolvimento de Sistemas - IFRNIdealizadora do Grupo WebLovers - http://grupoweblovers.co.ccmonte.daniele@gmail.com - danie_monte@hotmail.com
  5. 5. Quem SomosElionai Moura - @eli_embitsGraduando em Análise e Desenvolvimento de Sistemas - IFRNEmpreendedor e Desenvolvedor PHP da EmBitsIdealizador do Grupo WebLovers - http://grupoweblovers.co.ccnicklegal@gmail.com - eli_ml@hotmail.com
  6. 6. Quem SomosGiancarlo Lima - @giancarlozeroGraduando em Análise e Desenvolvimento de Sistemas - IFRNIdealizador do Grupo WebLovers - http://grupoweblovers.co.ccgiancarlozero@gmail.com - giancarlozero@yahoo.com.br
  7. 7. O que é?jQuery é um framework para ajudar osdesenvolvedores a se concentrarem na lógicados sistemas da web e não nos problemas deincompatibilidade dos navegadores atuais.É uma poderosa biblioteca JavaScript criadapara simplificar a criação de efeitos visuais ede interatividade em web sites.Seu lema é: "Escrever menos e fazer mais".
  8. 8. Principais VantagensCompatibilidade entre os navegadores.Redução de código.Reutilização do código através de plugins.Utilização de uma vasta quantidade de pluginscriados por outros desenvolvedores.Trabalha facilmente com AJAX e DOM.Implementação segura de recursos do CSS1,CSS2 e CSS3.
  9. 9. It`s ShowTime! Ou melhor, CodeTime! http://www.liquisdesign.com/blog/wp-content/uploads/2010/04/ web_coding_collage.jpg
  10. 10. Os primeiros passos!
  11. 11. Os primeiros passos!window.onload = function(){ alert("welcome");}Antes - Javascript Puro - Boring!$(document).ready(function(){ // Your code here});Depois - Jquery - Cool!
  12. 12. Seletores de Elementos Outras Referências: http://api.jquery.com/category/selectors/ $(document) $(“*”) $(“#idElemento”) $(“.classeElemento”) $(“element”) Ex.: $(“a”), $(“div”), $(“ul li”) $(“parent > child”) Ex.: $("ul.topnav > li")
  13. 13. Seletores de Elementos Outras Referências: http://api.jquery.com/category/selectors/var element = document.getElementById("lista-ordenada");element.setAttribute("class", "sem-estilo");Antes - Javascript Puro - Boring!var element = $("#lista-ordenada");element.addClass("sem-estilo"); ou$("#lista-ordenada").addClass("sem-estilo");Depois - Jquery - Cool!
  14. 14. Manipuladores de Eventos Outras Referências: http://api.jquery.com/category/events/ .blur() .focusout() .ready() .change() .hover() .resize() .click() .keydown() .scroll() .dblclick() .keypress() .select() .focus() .keyup() .submit() .focusin() .load()
  15. 15. Manipuladores de Eventos Outras Referências: http://api.jquery.com/category/events/ function displayDate() { alert(new Date()); } <button type="button" onclick="displayDate()">Display Date</button>Antes - Javascript Puro - Boring! $("button").click(displayDate());Depois - Jquery - Cool!
  16. 16. Manipuladores de Atributos Outras Referências: http://api.jquery.com/category/attributes/ .addClass() .attr() .hasClass() .removeAttr() .removeClass() .html() .toggleClass() .val()
  17. 17. Manipuladores de Elementos Outras Referências: http://api.jquery.com/category/manipulation/.addClass() .detach() .prepend().after() .empty() .remove().append() .height() .replaceAll().attr() .html() .text().before() .insertAfter() .val().clone() .insertBefore() .width().css() .position() .wrap()
  18. 18. Manipuladores de Efeitos Outras Referências: http://api.jquery.com/category/effects/.animate() .fadeOut() .slideToggle().clearQueue() fadeToggle() slideUp().delay() .hide() .stop().dequeue() .queue() .toggle().fadeIn() .show().fadeOut() .slideDown()
  19. 19. Perguntas?
  20. 20. Agradecimentos!
  21. 21. Confira o código completo dos exemplos em: www.github.com/ grupoweblovers
  22. 22. Não deixem de se cadastrarem no nosso grupo de estudos! www.grupoweblovers.co.cc
  23. 23. Obrigado!

×