Desenvolvimento de Aplicaes

para Internet
Aula 10
Celso Olivete Jnior
olivete@fct.unesp.br
www.fct.unesp.br/docentes/dmec/olivete
Aula 10
Cronograma
Contedo Data
!. "ecnolo#ia J$O% e A&a' com J(uer)
Definies de JSON, Ajax e JQuery
Requisies e Events Ajax
Requisies JSON
0!"10 e
1#"10
*
Desenvlvi$ent de A%li&aes %ara 'nternet
Requisies JSON
()tds JQuery
. Desenvolvimento de Aplicaes
A%resenta* ds +rjets
,0"10
+rva ,0"10
RER ,-"10
jQuery
jQuery uma biblioteca para o
desenvolvimento rpido de scripts em
java, que interagem com o html.
possvel atribuir eventos, definir efeitos, possvel atribuir eventos, definir efeitos,
alterar ou criar elementos na pgina, dentre
diversas outras aes.
+
Desenvlvi$ent de A%li&aes %ara 'nternet
./(0
1nte2d
1SS
A%resenta*
JavaS&ri%t
'ntera*
jQuery
Verso para bai!ar a biblioteca e
documentao" jquery.com
,
Desenvlvi$ent de A%li&aes %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
endereo da documentao 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&aes %ara 'nternet
jQuery
Verificando se a biblioteca est
carregada
.
Desenvlvi$ent de A%li&aes %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&aes %ara 'nternet
jQuery - Selecionando
atributos
$(input);
// Todos inputs da pgina
$(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&aes %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&aes %ara 'nternet
jQuery - Definindo
mltiplos atributos
&tili'ando mtodos 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&aes %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 parmetro
$(p).removeClass(); // remove todas as
classes
$(p).toggleClass(bigger); // se o elemento
tiver a classe bigger, o jQuery remove. Se
no tiver, adiciona

Desenvlvi$ent de A%li&aes %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&aes %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>Contedo</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&aes %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&aes %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&aes %ara 'nternet
jQuery inserindo HTML no
documento
before
$(ul).before(<h3>Contedo</h3>);
#onte.do
(undamentos )ava*cript
+,-
jQuery
.
Desenvlvi$ent de A%li&aes %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&aes %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 boto do mouse pressionado
0
Desenvlvi$ent de A%li&aes %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 trmino do click do mouse
1
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery eentos do mouse
#lic/ 0 e!emplo
$("p").click(function () {
$("p").hide();
*!
Desenvlvi$ent de A%li&aes %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&aes %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 formulrio
**
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery objeto eent
$(body).keypress(function (event)
{
}); });
event.which; // cdigo nmerico da
tecla pressionada
event.preventDefault(); // evita a
ao padro do browser
*+
Desenvlvi$ent de A%li&aes %ara 'nternet
jQuery anima!"es slide
.slideUp([durao][,callback]);
durao
Tempo da animao em milisegundos Tempo da animao em milisegundos
Default 400 milisegundos
Aceita parmetros slow (600ms) e fast
(200ms)
callback
Funo que ser executada aps o trmino
da animao
*,
Desenvlvi$ent de A%li&aes %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 animao!);
});
$(p).slideDown(fast);
$(p).slideToggle();
*-
Desenvlvi$ent de A%li&aes %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 animao!);
});
$(p).fadeOut(fast);
$(p).fadeToggle();
*.
Desenvlvi$ent de A%li&aes %ara 'nternet
*/
Desenvlvi$ent de A%li&aes %ara 'nternet