Programação Web com jQuery

978 views
849 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

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

×