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,098 views

Published on

Oficina realizada em 2011. Apresenta a linguagem javascript e os frameworks jQuery e jQuery UI. Contém vários exercícios práticos e demos além de referências úteis.

Published in: Technology
  • Be the first to comment

Programação Web com jQuery

  1. 1. Victor Adriel
  2. 2.  Victor Adriel de J. Oliveira  Associação Empresa Júnior de Computação: ◦ 2008 – Trainee ◦ 2009 – Diretor Administrativo/Financeiro ◦ 2010 – Conselheiro Fiscal  Programação Web: [HTML/CSS (tableless), jQuery, PHP, Smarty]  Contato: victorajoliveira@gmail.com  blogvictoradriel.blogspot.com
  3. 3.  O que é  Sintaxe ◦ Seletores ◦ Manipulação do DOM ◦ CSS ◦ Eventos ◦ Efeitos ◦ Formulários  jQuery UI  Práticas
  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.  22/08/2005 ◦ “The premise for the module is as follows: Using the power of Pseudo-CSS Selectors, bind your Javascript functions to various HTML elements in the DOM. Looking at how Behaviour works, I've never been completely happy - it simply seems too tedious and verbose for everyday use.” (John Resig)  14/01/2006 ◦ jQuery: New Wave Javascript
  6. 6.  22/08/2005 ◦ “The premise for the module is as follows: Using the power of Pseudo-CSS Selectors, bind your Javascript functions to various HTML elements in the DOM. Looking at how Behaviour works, I've never been completely happy - it simply seems too tedious and verbose for everyday use.”  14/01/2006 ◦ jQuery: New Wave Javascript “Jquery is like behaviour that has been sent back from the future by a secret fucking government lab” Zombieland
  7. 7.  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.
  8. 8.  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.
  9. 9.  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
  10. 10.  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
  11. 11.  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>
  12. 12.  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
  13. 13.  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>
  14. 14.  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.
  15. 15.  JavaScript in-line: ◦ CSS <style type=“text/css”> h1 { color:#090; } </style> ◦ HTML com o JavaScript in-line <h1 id=“cor”>Cabeçalho muda de cor</h1> <button type=“button” onclick=“document.getElementById(‘cor’).style.color =‘#F00’;”>Vermelha</button>
  16. 16.  Função JavaScript: <script type=“text/javascript”> function mudaCor() { document.getElementById(‘cor’).style.color=‘#F00’; } </script> ◦ HTML <h1 id=“cor”>Cabeçalho muda de cor</h1> <button type=“button” onclick=“mudaCor();”>Vermelha</button>
  17. 17.  JavaScript fora da marcação: <script type=“text/javascript”> Window.onload = function(){ Document.getElementById(‘btnRed’).onclick = mudaCor; } function mudaCor() { document.getElementById(‘cor’).style.color=‘#F00’; } </script>
  18. 18.  JavaScript fora da marcação: ◦ HTML <h1 id="cor">Cabeçalho muda de cor</h1> <button type="button" id=“btnRed">Vermelha</button>
  19. 19.  jQuery: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btnRed").click(function () { $("#cor").css("color","#FF0000"); }); }); </script>
  20. 20.  Método ready() ◦ No javascript window.onload = function(){ Do this; } ◦ No jQuery $(document).ready(function(){ Do this; });
  21. 21.  Construtor jQuery ◦ $( ) ◦ jQuery( )  jQuery.noConflict( ) ◦ Usa o alias jQuery ou outro de sua preferência
  22. 22.  jQuery adota os seletores CSS 3! #ôPelaDoido  É necessário rever a terminologia aplicada aos elementos que compõem a árvore do documento.
  23. 23.  HTML DOM
  24. 24.  Categorias: ◦ Básicos ◦ De atributo ◦ Hierárquicos ◦ Filtros  Básicos  De conteúdo  Por visibilidade  De filhos ◦ De formulários
  25. 25.  Básicos ◦ Universal  $(“*”) ◦ De elemento  $(“p”) ◦ De múltiplos elementos  $(“p, h1, img”)
  26. 26.  Básicos ◦ De classe  $(“.class”) ◦ De ID  $(“#id”)
  27. 27.  De atributo  $(‘[nome]’)  $(‘[nome = “valor”]’)  $(‘[nome != “valor”]’)  $(‘[nome ^= “valor”]’)  $(‘[nome |= “valor”]’)
  28. 28.  De atributo  $(‘[nome *= “valor”]’)  $(‘[nome ~= “valor”]’)  $(‘[nome $= “valor”]’)  $(‘[nome = “valor”][nome2 = “valor2”]’)
  29. 29.  Hierárquicos  $(“ancestral descendente”)  $(“pai > filho”)  $(“anterior + posterior”)  $(“elemento ~ irmãos”)
  30. 30.  Atributos gerais ◦ .attr( nomeAtributo ) .attr( nomeAtributo, valor ) Ex: $(‘input’).attr(‘disabled’, ‘disabled’) ◦ .prop( nomePropriedade ) .prop( nomePropriedade, valor ) Ex: $(‘input’).prop({ disabled: true });
  31. 31. ◦ .removeAttr( nomeAtributo ) ◦ .removeProp( nomePropriedade ) Ex: $(“input”).removeProp(“checked”); ◦ .val( ) .val( valor ) Ex: $(“input”).val(‘Digite seu nome’);
  32. 32.  Atributos de classe ◦ .addClass( nomeClasse ) ◦ .removeClass( [nomeClasse] ) ◦ .hasClass( nomeClasse ) ◦ .toggleClass( nomeClasse ) .toggleClass( nomeClasse, switch ) .toggleClass( [switch] )
  33. 33.  HTML <body> <img src=" http://goo.gl/kQBXL" alt="Yao Ming" /> <div class="info"></div> </body>
  34. 34.  jQuery $(document).ready(function(){ var atrAlt = $('img').attr('alt'); $('div').text(atrAlt ); $('img').attr('title','Você perdeu a capacitação?'); });
  35. 35.  CSS <style type=“text/css”> .info{ color: red; } .highlight { background: yellow; } </style>
  36. 36.  jQuery $('div').removeClass('info');
  37. 37.  jQuery $('div').removeClass('info').addClass('highlight');
  38. 38.  jQuery $('div').removeClass('info').addClass('highlight'); var ctd=0; $('div').click(function( ){ ctd++; $('div').toggleClass('highlight', ctd % 3 == 0); });
  39. 39.  Inserção no DOM (Outside) ◦ .after( ) ◦ .before( ) Ex: $("p").before("<b>Hello</b>"); ◦ .insertAfter( ) ◦ .insertBefore( ) Ex: $("p").insertBefore("#smthng");
  40. 40.  Inserção no DOM (Inside) ◦ .append( ) ◦ .prepend( ) Ex: $("p").prepend("<b>Hello</b>"); ◦ .appendTo( ) ◦ .prependTo( ) Ex: $("p").prependTo("#smthng");
  41. 41.  Inserção no DOM (Inside) ◦ .html( ) ◦ .text( ) Ex: ◦ $(“div").html(“<button>botão</button>”); ◦ $(“div").text (“<button>botão</button>”);
  42. 42.  Inserção no DOM (Around) ◦ .wrap( ) ◦ .wrapAll( ) ◦ .wrapInner( ) ◦ CSS div { border: 2px solid blue; } p { background:yellow; margin:4px; } ◦ HTML <p>Hello</p> ◦ jQuery $("p").wrap("<div></div>");
  43. 43.  Remoção no DOM ◦ .unwrap( )  Remove o pai e coloca o filho no lugar ◦ .empty( )  Remove conteúdo do elemento ◦ .detach( )  Remove elementos mas permite recuperá-los ◦ .remove( )  Remove elementos completamente
  44. 44.  Substituição no DOM ◦ .replaceAll( ) ◦ .replaceWith( ) Ex: ◦ $("<b>Paragraph. </b>").replaceAll("p"); ◦ $("p").replaceWith("<b>Paragraph. </b>");  Cópias ◦ .clone( )
  45. 45.  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>
  46. 46.  jQuery $('#novoColaborador').click(function( ){ $('.copy:last').clone( ).appendTo('body'); }); $('#removColaborador').click(function( ){ $('.copy:last').remove( ); });
  47. 47.  Propriedades de estilo ◦ .css( ) Ex: ◦ Var back = $(“div").css("background-color"); ◦ $("p").css("color","red"); ◦ $( this ).css({"width" : "+=100", "color" : "red"});
  48. 48.  Dimensionamento ◦ .height( ) / .width( ) ◦ .innerHeight( ) / .innerWidth( ) ◦ .outerHeight( ) / .outerWidth( )
  49. 49.  Dimensionamento ◦ .height( ) / .width( ) ◦ .innerHeight( ) / .innerWidth( ) ◦ .outerHeight( ) / .outerWidth( )
  50. 50.  Dimensionamento ◦ .height( ) / .width( ) ◦ .innerHeight( ) / .innerWidth( ) ◦ .outerHeight( ) / .outerWidth( )
  51. 51.  Offset ◦ .offset( ) ◦ .position( ) Ex: var pos = $("p").position( ); alert( pos.left ); ◦ .scrollLeft( ) / .scrollTop( ) Ex: $(“div").scrollLeft(300);
  52. 52.  Diferença entre offset e position: ◦ CSS div { padding: 15px;} p { margin-left:10px; } ◦ HTML <div><p>Hello</p></div> <p></p> ◦ jQuery var pos = $("p:first").position( ); $("p:last").text( "left: "+ pos.left + ", top: "+ pos.top );
  53. 53. ◦ CSS #box {background: black; color: #fff; width:100px;} ◦ HTML <div id="box">Click me to grow</div> ◦ jQuery $("#box").click(function ( ) { $( this ).css( "width","+=200" ); });
  54. 54.  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
  55. 55.  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
  56. 56.  Vamos usar o jsbin para treinar <body> <p>Pressione o mouse aqui.</p> <script> $("p").mouseup(function( ){ $(this).append('<span style="color:#F00;">Up.</span>'); }).mousedown(function(){ $(this).append('<span style="color:#00F;">Down.</span>'); }); </script> </body>
  57. 57.  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
  58. 58. var estado=0; $(‘body’).keypress(function(tecla){ switch( estado ){ case 0: if(tecla.which==116){ estado++; } else { estado=0; } break; case 1: if(tecla.which==101){ estado++; } else { estado=0; } break; case 2: if(tecla.which==99){ alert(“ Vc digitou ‘tec’? ”); } estado=0; } });
  59. 59.  Além dos eventos do mouse e teclado vocês devem estudar mais sobre:  Event Handler Attachment  Objetos de eventos  Eventos do browser  Carregando o documento
  60. 60.  Agora vamos brincar um pouquinho ^^  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.
  61. 61.  Categorias ◦ Básicos ◦ De opacidade ◦ Corrediços ◦ De customização
  62. 62.  Básicos ◦ .hide( ) ◦ .show( ) ◦ .toggle( )
  63. 63.  Opacidade ◦ .fadeIn( ) ◦ .fadeOut( ) ◦ .fadeTo( ) ◦ .fadeToggle( )
  64. 64.  Corrediços ◦ .slideDown( ) ◦ .slideUp( ) ◦ .slideToggle( )
  65. 65.  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( ); });
  66. 66.  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( )
  67. 67.  Customização ◦ .animate( ) ◦ .delay( ) ◦ .stop( )
  68. 68. ◦ 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>
  69. 69. ◦ jQuery $("#right").click(function( ){ $(".block").animate({"margin-left": "+=200px"}, "slow"); }); $("#left").click(function( ){ $(".block").animate({"margin-left": "-=200px"}, "slow"); });
  70. 70. ◦ 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 ); });
  71. 71. ◦ HTML <button id=“stop">STOP</button> ◦ jQuery $("#stop").click(function( ){ $(".block").stop( ); });
  72. 72.  Baixe o arquivo: http://goo.gl/eo7MJ ◦ Ajude o Mário a chegar ao outro lado usando o método animate() do jQuery.
  73. 73.  Seletores para formulários: ◦ :button ◦ :checkbox ◦ :input ◦ :text ◦ :radio ◦ :submit ◦ :reset ◦ :password ◦ :selected ◦ ...
  74. 74.  Seletores para formulários: ◦ :button ◦ :checkbox ◦ :input ◦ :text ◦ :radio ◦ :submit ◦ :reset ◦ :password ◦ :selected ◦ ... Ex: $(“input:password”).css(“color”, “#CCC”);
  75. 75.  Eventos relacionados a formulários: ◦ .blur( ) ◦ .change( ) ◦ .focus( ) ◦ .select( ) ◦ .submit( )
  76. 76. ◦ 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'); });
  77. 77.  Vamos baixar o formulário e incrementá-lo usando o jQuery. (http://goo.gl/Feq7L)  Começaremos analisando o código HTML do formulário.
  78. 78. // Dicas de preenchimento $(‘input + span').hide( ); $(".obrigatorio").blur(function( ){ var val = $(this).val( ); if(val == ""){ $(this).next( ).show( ); }else{ $(this).next( ).hide( ); } });
  79. 79. //Desabilitar campos $("#nao").change(function( ){ $("input[name='local']").val("") .attr('disabled','disabled'); }); $("#sim").change(function( ){ $("input[name='local']") .removeAttr('disabled'); });
  80. 80. //Selecionar todos $("#all").click(function( ){ if(this.checked){ $(".curso").attr('checked','checked'); }else{ $(".curso").removeAttr('checked'); } });
  81. 81. //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; }
  82. 82. 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; });
  83. 83.  Provê abstrações para interações e animações de baixo-nível, efeitos avançados e ferramentas personalizáveis construídas sobre a biblioteca jQuery.
  84. 84.  Interações ◦ Draggable ◦ Droppable ◦ Resizable ◦ Selectable ◦ Sortable
  85. 85.  Widgets ◦ Accordion ◦ Autocomplete ◦ Button ◦ Datepicker ◦ Dialog ◦ Progressbar ◦ Slider ◦ Tabs
  86. 86. var nomes= [ "Beatriz Silva", "Eduardo Dantas", "Ivan Cezanne", "Janai Maciel", "José Adão", "Newton Costa", "Thiago Evangelista"]; $( "input[name='nome']" ) .autocomplete({ source: nomes });
  87. 87.  HTML <div id="dialog" title="Muaahaa"> <p>Cuidado: Vírus! Não feche essa pop-up.</p> </div>  jQuery $( "#dialog" ).dialog();
  88. 88. <div id="tabs"> <ul> <li><a href="#tabs-1">Um item</a></li> <li><a href="#tabs-2">Outro</a></li> <li><a href="#tabs-3">Mais um</a></li> </ul> <div id="tabs-1"> <p>Um texto aqui.</p> </div> <div id="tabs-2"> <p>Um texto aqui.</p> </div> <div id="tabs-3"> <p>Um texto aqui.</p> <p>Um texto aqui.</p> </div> </div> jQuery: $( "#tabs" ).tabs( );
  89. 89. <div id="accordion"> <h3><a href="#">Um item</a></h3> <div> <p>Um texto aki</p> </div> <h3><a href="#">Outro</a></h3> <div> <p>Um texto aki</p> </div> <h3><a href="#">Mais um</a></h3> <div> <p>Um texto aki</p> </div> </div> jQuery: $( "#accordion" ).accordion( );
  90. 90.  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

×