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.

Programação Web com jQuery

1,700 views

Published on

Oficina realizada na InfoIlhéus em 2011. Apresenta o framework jQuery como uma ferramenta para a rápida escrita de javascript.

Published in: Technology
  • Be the first to comment

Programação Web com jQuery

  1. 1. A melhor forma de escrever JavaScript
  2. 2.  Victor Adriel de J. Oliveira ◦ Ciência da Computação - UESC ◦ Associação Empresa Júnior de Computação ◦ Programação Web: HTML/CSS (tableless), jQuery, PHP, Smarty, ... ◦ Contato: victorajoliveira@gmail.com blogvictoradriel.blogspot.com
  3. 3.  Introdução ◦ O que é ◦ Características ◦ DOM ◦ JavaScript ◦ Como usar ◦ JavaScript vs. jQuery  jQuery em ação ◦ Método ready( ) ◦ Construtor $( ) ◦ Seletores ◦ Manipulação do DOM ◦ CSS ◦ Eventos ◦ Efeitos ◦ Formulários
  4. 4.  É uma biblioteca JavaScript disponibilizada como software livre e aberto, desenvolvida para mudar a forma de escrever JavaScript.  “O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?” (John Resig, jQuery in Action)
  5. 5.  Utiliza seletores CSS para acessar e manipular o DOM;  Alheio às inconsistências de renderização entre navegadores;  Extensível;  Provê interatividade;  Simplifica tarefas específicas de JavaScript.
  6. 6.  HTML DOM: ◦ O HTML DOM define objetos e propriedades para todos os elementos HTML, e os métodos (interface) para acessá-los. ◦ Em outras palavras: o HTML DOM é um padrão para acesso, atualização, adição ou deleção de elementos HTML.
  7. 7.  Propriedades do HTML DOM: ◦ x.innerHTML – texto do elemento x ◦ x.nodeName – nome do elemento x ◦ x.nodeValue – valor do elemento x ◦ x.parentNode – pai do elemento x ◦ x.childNodes – filhos do elemento x ◦ x.attributes – atributos do elemento x
  8. 8.  Métodos do HTML DOM: ◦ x.getElementById(id)  Captura o elemento com um id específico ◦ x.getElementsByTagName(name)  Captura todos os elementos com o mesmo comando ◦ x.appendChild(node)  Insere um novo nó filho no elemento x ◦ x.removeChild(node)  Remove um nó filho do elemento x
  9. 9.  Métodos do HTML DOM: <html> <body> <p id="intro">Hello World!</p> <script type=“text/javascript”> txt=document.getElementById("intro").innerHTML; alert("O texto do paragrafo com o id 'info': " + txt); </script> </body> </html>
  10. 10.  Métodos do HTML DOM: <html> <body> <p id="intro">Hello World!</p> <script type=“text/javascript”> txt=document.getElementById("intro").innerHTML; alert("O texto do paragrafo com o id 'info': " + txt); </script> </body> </html> Var txt = $(‘#intro’).val(); Com jQuery
  11. 11.  Ir ao site: http://jquery.com  Fazer download da biblioteca  Linkar na página HTML: <head> <script type=“text/javascript” src=“/caminho/jquery-vs.js”></script> </head>
  12. 12.  Minified ◦ jquery-1.6.4.min.js ◦ Compacto e de leitura difícil  Uncompressed ◦ jquery-1.6.4.js ◦ Espaço entre cada linha de código e amplamente comentado.
  13. 13.  HTML: <h1 id=“cor”>Cabeçalho muda de cor</h1> <button type=“button” id=“btnRed”> Vermelha </button>
  14. 14.  JavaScript: <script type="text/javascript"> window.onload = function( ){ document.getElementById('btnRed').onclick = mudaCor; } function mudaCor( ){ document.getElementById('cor').style.color='#F00'; } </script>
  15. 15.  jQuery: <script type=“text/javascript” src=“jquery.js”></script> <script type=“text/javascript”> $(document).ready(function( ){ $(“#btnRed”).click(function( ) { $(“#cor”).css(“color”, “#FF0000”); }); }); </script>
  16. 16.  No javascript window.onload = function( ){ Do this; }  No jQuery $(document).ready(function( ){ Do this; });
  17. 17.  Pode ser escrito de duas maneiras: ◦ $( ) ◦ jQuery( )  jQuery.noConflict( ) ◦ Usa o alias jQuery ou outro de sua preferência ◦ Ex: $infoIlheus = jQuery.noConflict( ); $infoIlheus(document).ready(function( ){ ... });
  18. 18.  Categorias: ◦ Básicos ◦ De atributo ◦ Hierárquicos ◦ Filtros  Básicos  De conteúdo  Por visibilidade  De filhos ◦ De formulários
  19. 19. ◦ Universal  $(“*”) ◦ De elemento  $(“p”) ◦ De múltiplos elementos  $(“p, h1, img”) ◦ De classe  $(“.class”) ◦ De ID  $(“#id”)
  20. 20.  Atributos ◦ .attr( nomeAtributo ) .attr( nomeAtributo, valor ) .removeAttr( nomeAtributo ) Ex: $(‘input’).attr(‘disabled’, ‘disabled’) ◦ .addClass( nomeClasse ) .removeClass( [nomeClasse] ) .hasClass( nomeClasse ) .toggleClass( nomeClasse )
  21. 21.  Inserção no DOM (Outside) ◦ .after( ) ◦ .before( ) Ex: $("p").before("<b>Hello</b>");  Inserção no DOM (Inside) ◦ .append( ) ◦ .prepend( ) Ex: $("p").prepend("<b>Hello</b>");
  22. 22.  Inserção no DOM (Inside) ◦ .html( ) ◦ .text( ) ◦ .val( ) Ex: $(“div").html(“<button>botão</button>”);  Inserção no DOM (Around) ◦ .wrap( ) Ex: $("p").wrap("<div></div>");
  23. 23.  Remoção no DOM ◦ .unwrap( ) ◦ .empty( ) ◦ .remove( )  Substituição no DOM ◦ .replaceAll( ) ◦ .replaceWith( )  Cópias ◦ .clone( )
  24. 24.  HTML <label>Colaboradores:</label> <select class="copy" style="display:block;"> <option value="0">Selecione um...</option> <option value="1">Ana</option> <option value="2">João</option> <option value="3">Maria</option> </select> <button id="novoColaborador">More</button> <button id="removColaborador">Less</button>
  25. 25.  jQuery $('#novoColaborador').click(function( ){ $('.copy:last').clone( ).appendTo('body'); }); $('#removColaborador').click(function( ){ $('.copy:last').remove( ); });
  26. 26.  Propriedades de estilo ◦ .css( ) Ex: ◦ var back = $(“div").css("background-color"); ◦ $("p").css("color","red"); ◦ $( this ).css({"width" : "+=100", "color" : "red"});
  27. 27.  Eventos do mouse ◦ .click( )  Ativado com um clique ◦ .dblclick( )  Ativado com um duplo clique ◦ .hover( )  Ativado quando o cursor estiver sobre o elemento ◦ .mousemove( )  Ativado com o movimento do mouse
  28. 28.  Eventos do mouse ◦ .mousedown( ) / .mouseup( )  Ativado com pressionar/soltar o clique ◦ .mouseenter( ) / .mouseleave( )  Cursor passa sobre ou deixa o elemento ◦ .mouseover( ) / .mouseout( )  Cursor passa sobre ou sai dos elementos filhos ◦ .toggle( )  Ativa funções em cliques alternados
  29. 29.  Eventos do teclado ◦ .focusin( )  Ativado com o foco no elemento ◦ .focusout( )  Ativado com a perda do foco no elemento ◦ .keypress( )  Ativado com o pressionar de qualquer tecla ◦ .keyup( ) / .keydown( )  Ativado com o pressionar/soltar a tecla
  30. 30.  Acesse esse link: http://goo.gl/dLYCO e baixe o arquivo que vamos usar.  Vamos incrementar a página usando jQuery  O que for digitado na caixa de texto deve aparecer na tela.
  31. 31.  Básicos ◦ .show( ) ◦ .hide( ) ◦ .toggle( )  Opacidade ◦ .fadeIn( ) ◦ .fadeOut( ) ◦ .fadeToggle( )  Corrediços ◦ .slideDown( ) ◦ .slideUp( ) ◦ .slideToggle( )
  32. 32.  HTML <div> <h3>Titulo 1</h3> <p>texto 1. Texto, texto e mais texto</p> </div>  jQuery $('p').hide( ); $('h3').click(function( ){ $('p').hide( ); $(this).parent( ).find('p').show( ); });
  33. 33.  HTML <div> <h3>Titulo 1</h3> <p>texto 1. Texto, texto e mais texto</p> </div>  jQuery $('p').hide( ); $('h3').click(function( ){ $('p').hide( ); $(this).parent( ).find('p').show( ); }); Agora teste outros métodos: .fadeIn( ) e .fadeOut( ) .slideDown( ) e .slideUp( )
  34. 34.  Customização ◦ .animate( ) ◦ .delay( ) ◦ .stop( )
  35. 35. ◦ CSS div { background-color:#abc; width:90px; height:90px; margin:5px; font-size:1px; } ◦ HTML <button id="left">&laquo;</button> <button id="right">&raquo;</button> <div class="block">x</div>
  36. 36. ◦ jQuery $("#right").click(function( ){ $(".block").animate({"margin-left": "+=200px"}, "slow"); }); $("#left").click(function( ){ $(".block").animate({"margin-left": "-=200px"}, "slow"); });
  37. 37. ◦ HTML <button id="go">elem x</button> ◦ jQuery $("#go").click(function( ){ $(".block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "5em", borderWidth: "10px" }, 1500 ); });
  38. 38.  Baixe o arquivo: http://goo.gl/eo7MJ  Ajude o Mário a chegar ao outro lado usando o método animate() do jQuery.
  39. 39.  Eventos: ◦ .blur( ) ◦ .change( ) ◦ .focus( ) ◦ .select( ) ◦ .submit( )
  40. 40. ◦ HTML <form> <input type="text" name="busca" /> </form> ◦ jQuery $("input[name='busca']").val('Busca').css('color','#CCC') .focus(function( ){ $(this).val('').css('color','#000'); }).blur(function( ){ $(this).val('Busca').css('color','#CCC'); });
  41. 41.  Vamos baixar o formulário e incrementá-lo usando o jQuery. (http://goo.gl/ljccb)  Começaremos analisando o código HTML do formulário.
  42. 42. // Dicas de preenchimento $(‘input + span').hide( ); $(".obrigatorio").blur(function( ){ var val = $(this).val( ); if(val == ""){ $(this).next( ).show( ); }else{ $(this).next( ).hide( ); } });
  43. 43. //Desabilitar campos $("#nao").change(function( ){ $("input[name='local']").val("") .attr('disabled','disabled'); }); $("#sim").change(function( ){ $("input[name='local']") .removeAttr('disabled'); });
  44. 44. //Selecionar todos $("#all").click(function( ){ if(this.checked){ $(".curso").attr('checked','checked'); }else{ $(".curso").removeAttr('checked'); } });
  45. 45. //Validar $("form").submit(function( ) { var nome = $("input[name='nome']").val( ); var nasc = $("input[name='data']").val( ); var mail = $("input[name='email']").val( ); if(nome == ‘’){ alert("Preencha o campo nome."); return false; }
  46. 46. if(mail == ‘’){ alert("Preencha o campo email."); return false; } if((nasc != ‘’)&&(! nasc.match( /^[0-9]{2}/[0-9]{2}/[0-9]{4}$/))){ alert("Data de nascimento inválida."); return false; } return true; });
  47. 47.  jQuery Documentation  jQuery UI  Plugins  AJAX  Compactação  jQuery Mobile  Testes  Boas técnicas de programação
  48. 48.  http://jquery.com/  http://ejohn.org/blog/selectors-in-javascript/  http://bennolan.com/behaviour/  http://www.w3schools.com/htmldom/default.asp  jQuery – A Biblioteca do Programador JavaScript, 2008, Maurício S. Silva, NOVATEC  Ajax com jQuery – Requisições AJAX com a simplicidade de jQuery, 2009, Maurício S. Silva, NOVATEC Contato: victorajoliveira@gmail.com blogvictoradriel.blogspot.com

×