A melhor forma de escrever JavaScript
 Victor Adriel de J. Oliveira
◦ Ciência da Computação - UESC
◦ Associação Empresa Júnior de Computação
◦ Programação Web:...
 Introdução
◦ O que é
◦ Características
◦ DOM
◦ JavaScript
◦ Como usar
◦ JavaScript vs. jQuery
 jQuery em ação
◦ Método ...
 É uma biblioteca JavaScript disponibilizada
como software livre e aberto, desenvolvida
para mudar a forma de escrever Ja...
 Utiliza seletores CSS para acessar e manipular
o DOM;
 Alheio às inconsistências de renderização
entre navegadores;
 E...
 HTML DOM:
◦ O HTML DOM define objetos e propriedades para
todos os elementos HTML, e os métodos (interface)
para acessá-...
 Propriedades do HTML DOM:
◦ x.innerHTML – texto do elemento x
◦ x.nodeName – nome do elemento x
◦ x.nodeValue – valor do...
 Métodos do HTML DOM:
◦ x.getElementById(id)
 Captura o elemento com um id específico
◦ x.getElementsByTagName(name)
 C...
 Métodos do HTML DOM:
<html>
<body>
<p id="intro">Hello World!</p>
<script type=“text/javascript”>
txt=document.getElemen...
 Métodos do HTML DOM:
<html>
<body>
<p id="intro">Hello World!</p>
<script type=“text/javascript”>
txt=document.getElemen...
 Ir ao site: http://jquery.com
 Fazer download da biblioteca
 Linkar na página HTML:
<head>
<script type=“text/javascri...
 Minified
◦ jquery-1.6.4.min.js
◦ Compacto e de leitura difícil
 Uncompressed
◦ jquery-1.6.4.js
◦ Espaço entre cada linh...
 HTML:
<h1 id=“cor”>Cabeçalho muda de cor</h1>
<button type=“button” id=“btnRed”>
Vermelha
</button>
 JavaScript:
<script type="text/javascript">
window.onload = function( ){
document.getElementById('btnRed').onclick =
mud...
 jQuery:
<script type=“text/javascript”
src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(funct...
 No javascript
window.onload = function( ){
Do this;
}
 No jQuery
$(document).ready(function( ){
Do this;
});
 Pode ser escrito de duas maneiras:
◦ $( )
◦ jQuery( )
 jQuery.noConflict( )
◦ Usa o alias jQuery ou outro de sua prefer...
 Categorias:
◦ Básicos
◦ De atributo
◦ Hierárquicos
◦ Filtros
 Básicos
 De conteúdo
 Por visibilidade
 De filhos
◦ De...
◦ Universal
 $(“*”)
◦ De elemento
 $(“p”)
◦ De múltiplos elementos
 $(“p, h1, img”)
◦ De classe
 $(“.class”)
◦ De ID
...
 Atributos
◦ .attr( nomeAtributo )
.attr( nomeAtributo, valor )
.removeAttr( nomeAtributo )
Ex: $(‘input’).attr(‘disabled...
 Inserção no DOM (Outside)
◦ .after( )
◦ .before( )
Ex: $("p").before("<b>Hello</b>");
 Inserção no DOM (Inside)
◦ .appe...
 Inserção no DOM (Inside)
◦ .html( )
◦ .text( )
◦ .val( )
Ex: $(“div").html(“<button>botão</button>”);
 Inserção no DOM ...
 Remoção no DOM
◦ .unwrap( )
◦ .empty( )
◦ .remove( )
 Substituição no DOM
◦ .replaceAll( )
◦ .replaceWith( )
 Cópias
◦...
 HTML
<label>Colaboradores:</label>
<select class="copy" style="display:block;">
<option value="0">Selecione um...</optio...
 jQuery
$('#novoColaborador').click(function( ){
$('.copy:last').clone( ).appendTo('body');
});
$('#removColaborador').cl...
 Propriedades de estilo
◦ .css( )
Ex:
◦ var back = $(“div").css("background-color");
◦ $("p").css("color","red");
◦ $( th...
 Eventos do mouse
◦ .click( )
 Ativado com um clique
◦ .dblclick( )
 Ativado com um duplo clique
◦ .hover( )
 Ativado ...
 Eventos do mouse
◦ .mousedown( ) / .mouseup( )
 Ativado com pressionar/soltar o clique
◦ .mouseenter( ) / .mouseleave( ...
 Eventos do teclado
◦ .focusin( )
 Ativado com o foco no elemento
◦ .focusout( )
 Ativado com a perda do foco no elemen...
 Acesse esse link: http://goo.gl/dLYCO
e baixe o arquivo que vamos usar.
 Vamos incrementar a página usando jQuery
 O q...
 Básicos
◦ .show( )
◦ .hide( )
◦ .toggle( )
 Opacidade
◦ .fadeIn( )
◦ .fadeOut( )
◦ .fadeToggle( )
 Corrediços
◦ .slide...
 HTML
<div>
<h3>Titulo 1</h3>
<p>texto 1. Texto, texto e mais texto</p>
</div>
 jQuery
$('p').hide( );
$('h3').click(fun...
 HTML
<div>
<h3>Titulo 1</h3>
<p>texto 1. Texto, texto e mais texto</p>
</div>
 jQuery
$('p').hide( );
$('h3').click(fun...
 Customização
◦ .animate( )
◦ .delay( )
◦ .stop( )
◦ CSS
div {
background-color:#abc;
width:90px;
height:90px;
margin:5px;
font-size:1px;
}
◦ HTML
<button id="left">&laquo;<...
◦ jQuery
$("#right").click(function( ){
$(".block").animate({"margin-left": "+=200px"}, "slow");
});
$("#left").click(func...
◦ HTML
<button id="go">elem x</button>
◦ jQuery
$("#go").click(function( ){
$(".block").animate({
width: "70%",
opacity: 0...
 Baixe o arquivo: http://goo.gl/eo7MJ
 Ajude o Mário a chegar ao outro lado usando
o método animate() do jQuery.
 Eventos:
◦ .blur( )
◦ .change( )
◦ .focus( )
◦ .select( )
◦ .submit( )
◦ HTML
<form>
<input type="text" name="busca" />
</form>
◦ jQuery
$("input[name='busca']").val('Busca').css('color','#CCC'...
 Vamos baixar o formulário e incrementá-lo
usando o jQuery. (http://goo.gl/ljccb)
 Começaremos analisando o código HTML ...
// Dicas de preenchimento
$(‘input + span').hide( );
$(".obrigatorio").blur(function( ){
var val = $(this).val( );
if(val ...
//Desabilitar campos
$("#nao").change(function( ){
$("input[name='local']").val("")
.attr('disabled','disabled');
});
$("#...
//Selecionar todos
$("#all").click(function( ){
if(this.checked){
$(".curso").attr('checked','checked');
}else{
$(".curso"...
//Validar
$("form").submit(function( ) {
var nome = $("input[name='nome']").val( );
var nasc = $("input[name='data']").val...
if(mail == ‘’){
alert("Preencha o campo email.");
return false;
}
if((nasc != ‘’)&&(! nasc.match(
/^[0-9]{2}/[0-9]{2}/[0-9...
 jQuery Documentation
 jQuery UI
 Plugins
 AJAX
 Compactação
 jQuery Mobile
 Testes
 Boas técnicas de programação
 http://jquery.com/
 http://ejohn.org/blog/selectors-in-javascript/
 http://bennolan.com/behaviour/
 http://www.w3scho...
Programação Web com jQuery
Programação Web com jQuery
Upcoming SlideShare
Loading in...5
×

Programação Web com jQuery

1,329

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,329
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×