You are on page 1of 27

Desenvolvimento de Aplicações

para Internet
Aula 10
Celso Olivete Júnior
olivete@fct.unesp.br
www.fct.unesp.br/docentes/dmec/olivete
Aula 10
Cronograma
Conteúdo Data
!. "ecnolo#ia J$O% e A&a' com J(uer)
Definições de JSON, Ajax e JQuery
Requisições e Events Ajax
Requisições JSON
0!"10 e
1#"10
*
Desenvlvi$ent de A%li&ações %ara 'nternet
Requisições JSON
()tds JQuery
. Desenvolvimento de Aplicações
A%resentaç* ds +rjets
,0"10
+rva ,0"10
RER ,-"10
jQuery
jQuery é uma biblioteca para o
desenvolvimento rápido de scripts em
java, que interagem com o html.
possível atribuir eventos, definir efeitos, possível atribuir eventos, definir efeitos,
alterar ou criar elementos na página, dentre
diversas outras ações.
+
Desenvlvi$ent de A%li&ações %ara 'nternet
./(0
1nte2d
1SS
A%resentaç*
JavaS&ri%t
'nteraç*
jQuery
Verso para bai!ar a biblioteca e
documentaço" jquery.com
,
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery
#arregando a biblioteca no html
<script type=“text/javascript” src=“jquery-2.1.1.min.js”></script>
#aso no queira bai!ar, voc% pode incluir o
endereço da documentaço da biblioteca no
seu script.
3s&ri%t ty%e45text"javas&ri%t5 lan6ua6e 45javas&ri%t5
sr&457tt%8""&de9jquery9&$"jquery:,91919$in9js5;
3"s&ri%t;
-
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery
Verificando se a biblioteca está
carregada
.
Desenvlvi$ent de A%li&ações %ara 'nternet
$(document).ready(function(){
alert("jQuery funcionando");
alert(jQuery);
});
Seletores jQuery
$(“h1”);
(Nome do elemento)
$(“p.autor”);
(Elemento + . + Classe) (Elemento + . + Classe)
$(“.autor”);
(Somente a classe)
$(“p#rodape”);
(Elemento + # + Id)
$(“h1, p#rodape”);
(Mais de um elemento)
/
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery - Selecionando
atributos
$(“input”);
// Todos inputs da página
$(“input[type=‘text’]”);
// Todos inputs do tipo text
$(“p[id=‘rodape’]”); ou $(“p#rodape”);
$(“p[class=‘autor’]”); ou $(“p.autor”);
0
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – manipulando CSS
$(”p”).css(”font-size”);
// retorna o valor do font-size do elemento p
$(”p”).css(”font-size”, ”12px”);
// define o font-size do elemento p para 12px
1
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery - Definindo
múltiplos atributos
&tili'ando métodos encadeados
$(“p”).css(“font-size”, “24px”)
.css(“font-weight”, “bold”) .css(“font-weight”, “bold”)
.css(“line-height”, “32px”);
Ou8
$(“p”).css({“font-size”: “24px”,
“font-weight”: “bold”,
“line-height”: “32px”});
!
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – manipulando
classes
$(“p”).hasClass(“autor”);//retorna true ou false
$(“p”).addClass(“bigger”);
$(“p”).removeClass(“bigger”); // remove a $(“p”).removeClass(“bigger”); // remove a
classe passada via parâmetro
$(“p”).removeClass(); // remove todas as
classes
$(“p”).toggleClass(“bigger”); // se o elemento
tiver a classe bigger, o jQuery remove. Se
não tiver, adiciona

Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – ocultando e
mostrando um elemento
$(“p.autor”).hide();
//oculta o elemento
$(“p.autor”).show();
//mostra o elemento
$(“p.autor”).toggle();
Alterna entre hide e show
*
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – inserindo HTML no
documento
$(“ul”).append(“<li>SeletoresjQuery</li>”);
'nsere ele$ent n final da lista
$(“ul”).prepend(“<li>SeletoresjQuery</li>”);
'nsere ele$ent n in<&i da lista 'nsere ele$ent n in<&i da lista
$(“ul”).before(“<h3>Conteúdo</h3>”);
'nsere ele$ent antes da seleç*
$(“ul”).after(“<h3>Data e Hora:</h3>”);
'nsere ele$ent a%=s a seleç*
+
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – inserindo HTML no
documento
append
$(“ul”).append(“<li>Seletores jQuery</li>”);
• (undamentos )ava*cript
• +,-
• jQuery
• *eletores jQuery
,
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – inserindo HTML no
documento
prepend
$(“ul”).prepend(“<li>Seletores jQuery</li>”);
• *eletores jQuery
• (undamentos )ava*cript
• +,-
• jQuery
-
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – inserindo HTML no
documento
before
$(“ul”).before(“<h3>Conteúdo</h3>”);
#onte.do
• (undamentos )ava*cript
• +,-
• jQuery
.
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – inserindo HTML no
documento
after
$(“ul”).after(“<h3>Teste</h3>”);
• >unda$ents JavaS&ri%t
• DO(
• jQuery
/este
/
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – eentos do mouse
$(“p”).click();
//Dispara no evento de click do mouse
$(“p”).dblclick(); $(“p”).dblclick();
//Dispara com click duplo
$(“p”).hover();
//Dispara quando mouse entra e/ou sai do elemento
$(“p”).mousedown();
//Dispara quando o botão do mouse é pressionado
0
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – eentos do mouse
$(“p”).mouseenter();
//Dispara quando o mouse entra no elemento
$(“p”).mouseleave();
//Dispara quando o mouse sai do elemento
$(“p”).mousemove();
//Dispara quando o mouse se move
$(“p”).mouseup();
//Dispara quando ao término do click do mouse
1
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – eentos do mouse
#lic/ 0 e!emplo
$("p").click(function () {
$("p").hide();
*!
Desenvlvi$ent de A%li&ações %ara 'nternet
$("p").hide();
});
jQuery – eentos do
teclado
$(“input”).keydown();
//Dispara ao apertar a tecla
$(“input”).keypress();
//Dispara ao pressionar a tecla
$(“input”).keyup();
//Dispara ao soltar a tecla
*
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – eentos do
teclado
$(“input”).blur();
//Dispara ao input perder o foco
$(“input”).change();
//Dispara quando um valor é alterado //Dispara quando um valor é alterado
$(“input”).focus();
//Dispara quando um input recebe foco
$(“input”).select();
//Dispara ao selecionar um texto, option, radio
$(“input”).submit();
//Dispara submeter o formulário
**
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – objeto eent
$(“body”).keypress(function (event)
{
}); });
event.which; // código númerico da
tecla pressionada
event.preventDefault(); // evita a
ação padrão do browser
*+
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – anima!"es slide
.slideUp([duração][,callback]);
duração
– Tempo da animação em milisegundos – Tempo da animação em milisegundos
– Default 400 milisegundos
– Aceita parâmetros “slow” (600ms) e “fast”
(200ms)
callback
– Função que será executada após o término
da animação
*,
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – anima!"es# slide$p%
slideDo&n e slideToggle
$(“p”).slideUp(“slow”);
$(“p”).slideUp(1000, function () { $(“p”).slideUp(1000, function () {
alert(“Concluiu a animação!”);
});
$(“p”).slideDown(“fast”);
$(“p”).slideToggle();
*-
Desenvlvi$ent de A%li&ações %ara 'nternet
jQuery – anima!"es fade
?tili@a s $es$s %arA$etrs d slide
$(“p”).fadeIn(“slow”);
$(“p”).fadeIn(1000, function () {
alert(“Concluiu a animação!”);
});
$(“p”).fadeOut(“fast”);
$(“p”).fadeToggle();
*.
Desenvlvi$ent de A%li&ações %ara 'nternet
*/
Desenvlvi$ent de A%li&ações %ara 'nternet