Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,334 views

Published on

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

Published in: Technology
  • Be the first to comment

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!

×