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.
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. O que é
Sintaxe
◦ Seletores
◦ Manipulação do DOM
◦ CSS
◦ Eventos
◦ Efeitos
◦ Formulários
jQuery UI
Práticas
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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
15.
16. 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.
17. 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>
18. 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>
19. 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>
20. JavaScript fora da marcação:
◦ HTML
<h1 id="cor">Cabeçalho muda de cor</h1>
<button type="button"
id=“btnRed">Vermelha</button>
43. Inserção no DOM (Inside)
◦ .html( )
◦ .text( )
Ex:
◦ $(“div").html(“<button>botão</button>”);
◦ $(“div").text (“<button>botão</button>”);
44. 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>");
45. 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
49. Propriedades de estilo
◦ .css( )
Ex:
◦ Var back = $(“div").css("background-color");
◦ $("p").css("color","red");
◦ $( this ).css({"width" : "+=100", "color" : "red"});
54. 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 );
55. ◦ 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" );
});
56. 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
57. 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
58. 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>
59. 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
60. 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;
}
});
61. 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
62. 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.
83. //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;
}
84. 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;
});
85. 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.
92. 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