Aplicacoes Ricas para Internet.pdf

Prévia do material em texto

Aplicações Ricas para Internet
Prof. Dr. Wagner J. DizeróProf. Dr. Wagner J. Dizeró
wagner@unilins.edu.brwagner@unilins.edu.br
Versão: 12/11/2014
Plano de Ensino
� Ementa
� Critérios de Avaliação� Critérios de Avaliação
� Conteúdo Programático
� Bibliografia
2
Ementa
� Desenvolvimento de interfaces 
gráficas ricas para a Internet. Páginas 
dinâmicas com conexão a banco de 
dados na web. Segurança e dados na web. Segurança e 
desempenho de sistemas para a 
Internet. Integração de sistemas 
baseados na Internet. AJAX.
3
Critérios de Avaliação
� Composição de Nota:
� Provas: peso 8.0 (oito)
� Trabalhos: peso 2.0 (dois)� Trabalhos: peso 2.0 (dois)
� Frenquência:
� Mínima de 75% (venham 100%!!!)
4
Conteúdo Programático
� Aplicação Rica para Internet
� Definição
� jQuery
� Noções Básicas
� Tipos de Seletores
� Efeitos
� Comandos de Manipulação� Comandos de Manipulação
� Eventos
� Formulários
� Carregamento de páginas
� Ajax
� Ajax com jQuery
� .load(), .get(), .post(), .ajax()
� Integração com PHP e MySQL
� CRUD
5
Bibliografia
Livro Texto:
1. PHP 4: A Bíblia; Converse, Tim et al; Ed. Campus; 1ª edição; 2001; 5 exemplares.
2. Use a Cabeça: PHP e MySQL; Beighley, Linn; Ed. Alta Books; 1ª edição; 2010; 10 
exemplares.
3. Ajax (ASYNCHRONOUS JAVASCRIPT AND XML); Soares, Walace; Ed. Érica; 1ª 
edição; 2006; 10 exemplares.
Complementar:Complementar:
4. Profissional PHP: Programando; Castagneto, Jesus et al; Ed. Makron Books; 1ª 
edição; 2001; 1 exemplar.
5. PHP e MySQL: Desenvolvimento Web; Welling, Luke et al; Ed. Campus; 1ª 
edição; 2001; 1 exemplar.
6. Programando em PHP: Conceitos e Aplicações; Soares, Walace; Ed. Érica; 1ª 
edição; 2000; 5 exemplares.
7. Fundamentos de PHP; Meloni, Julie C.; Ed. Ciência Moderna; 1ª edição; 2000; 5 
exemplares.
8. Guia de Consulta Rápida: Integrando PHP com MySQL; Stoco, Lucio M.; Ed. 
Novatec; 1ª edição; 2000; 5 exemplares.
6
Aplicação Rica para Internet
Rich Internet Application (RIA)
7
O que é Interface Rica (RIA)?
� Rich Internet Application (RIA) é a 
combinação da riqueza de aplicações 
Desktop tradicionais e a facilidade de Desktop tradicionais e a facilidade de 
acesso da Web.
8
O que é Interface Rica (RIA)?
� Contribui com conteúdo dinâmico e 
interfaces avançadas de usuários com 
controles desenvolvidos com Ajax, 
Html, Javascript e tecnologias 
relacionadas.relacionadas.
� A principal mudança consiste em 
carregar um site uma única vez e 
apenas atualizar áreas do site através 
de chamadas remotas, sem recarregar 
(reload) todo o site.
9
jQuery
Site oficial: http://jquery.com
O que é jQuery?
� Biblioteca Javascript cross-browser
� Software livre e aberto (GPL)
� Criada em agosto de 2005� Criada em agosto de 2005
� Introduzem algumas funcionalidades 
adicionais, não nativas de html e css
� Simplicidade é a palavra que resume e 
norteia o desenvolvimento com jQuery
11
Para que serve jQuery?
� Simplificar tarefas de Javascript
� Prover interatividade
� Adicionar efeitos visuais e animações� Adicionar efeitos visuais e animações
� Acessar e manipular conteúdos
� Modificar apresentação e estilização
� Buscar dados no servidor remoto (AJAX)
12
Qual a versão atual do jQuery?
� Repositório:
� http://code.jquery.com/
jQuery 2.x (IE <9 not supported)
� Há 2 formatos:
� "uncompressed" recomendado para 
debug na fase de desenvolvimento
� "minified" (.min) é compactado para 
uso em produção
13
Como instalar jQuery?
� A partir de arquivo local
� Hospedando a biblioteca localmente no seu HD 
ou servidor remoto no qual o site será 
hospedado e linkar a página
<script src="jquery-2.0.3.min.js"></script><script src="jquery-2.0.3.min.js"></script>
� A partir de arquivo remoto público
� Vários servidores, como Google e Microsoft, 
mantêm em seus sites as diferentes versões da 
biblioteca para acesso público.
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
14
Como usar o jQuery?
� Modo de uso:
� seletor.comando([parâmetros])
� Exemplos:� Exemplos:
� $('h1').css('color');
� Retorna a cor atual de texto do cabeçalho h1
� $('h1').css('color', 'green');
� Altera todo cabeçalho h1 para texto em verde
� $('h1').css({'color': 'yellow', 'background': 'blue'});
� Altera mais de um par propriedade/valor numa única chamada
15Obs.: Um seletor por ser tag, id, class ou, ainda, ser composto. 
Tipos de Seletores
• tag • especiais• tag
• id
• class
• this
• especiais
• grupamento
• composto
• filtro
• encadeamento
• formulários
Seletor por tag, id e class
// seleciona todas as div´s
$('input').click(function(){
$('div').css({'color':'yellow', 'background':'blue'});
});
// seleciona o elemento com id igual a #id// seleciona o elemento com id igual a #id
$('input').click(function(){
$('#id').css({'color':'yellow', 'background':'blue'});
});
// seleciona os elementos da classe .class
$('input').click(function(){
$('.class').css({'color':'yellow', 'background':'blue'});
});
17
Formas Alternativas de Uso
// forma tradicional
$('p').css('background','yellow');
// atribuindo para uma variável
var p = $('p');
p.css('fontWeight', 'bold');p.css('fontWeight', 'bold');
// forma alternativa para evitar conflitos
jQuery('p').css('fontSize', '24px');
// criando uma nova forma alternativa
var $j = jQuery.noConflict();
$j('p').css('fontFamily', 'verdana, arial');
18
Exemplo – seletor tag
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>jQuery</title>
</head>
<body>
<input type="button" value="Mudar Cor"><input type="button" value="Mudar Cor">
<div>Manipulando CSS através de jQuery</div>
<div>Usar jQuery é muito prático!</div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('input').click(function(){
$('div').css({'color':'yellow', 'background':'blue'});
});
</script>
</html>
19Obs.: Todas as divs do documento serão formatadas
Exemplo – seletor id
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>jQuery</title>
</head>
<body>
<input type="button" value="Mudar Cor"><input type="button" value="Mudar Cor">
<div id="destaque">Manipulando CSS através de jQuery</div>
<div>Usar jQuery é muito prático!</div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('input').click(function(){
$('#destaque').css({'color':'yellow','background':'blue'});
});
</script>
</html>
20Obs.: Apenas a div com id ‘destaque’ será formatada
Exemplo – seletor class
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
</head>
<body>
<input type="button" value="Destacar">
<ul>
<li class="promocao">Pen Drive</li><li class="promocao">Pen Drive</li>
<li class="promocao">Impressora</li>
<li>Disquete</li>
</ul> 
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('input').click(function(){
$('.promocao').css({'color':'yellow','background':'blue'});
}); 
</script>
</html>
21Obs.: Apenas os itens da classe ‘promocao’ serão formatadas
Exemplo – objeto this 
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
</head>
<body>
<p>HMTL</p>
<p>CSS</p><p>CSS</p>
<p>jQuery</p>
<p>AJAX</p>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('p').click(function(){
$(this).css('color', 'red');
});
</script>
</html>
22
Seletores especiais
� Grupamento de seletores:
� Aplica cor para vários seletores
� $('p, span, .classe').css('color', 'red');
� Seletores compostos:
� Aplica fundo para span dentro de div
� $('div span').css('background','red');� $('div span').css('background', 'red');
� Seletores com filtros:
� first, last, not, even, odd, eq, gt, lt, contains, parent, ...
� $('tr:even').css('background', 'red');
� Seletores encadeados:
� Fundo azul no terceiro h3 dentro de #content
� $('#content').find('h3').eq(2).css('background', 'blue');
23
Seletores por atributo
� [atribuito]
� Elementos que contenham determinado atributo
� $('div[id]').css('color', 'lime');
� [atributo=valor]
� Elementos com atributo com determinado valor
� $('input[type=text']).css('background', 'yellow');� $('input[type=text']).css('background', 'yellow');
� [atributo!=valor]: Elementos que não tenham determinado valor
� [atributo^=valor]: Elementos iniciados por um determinado valor
� [atributo$=valor]: Elementos que terminem com um valor
� [atributo*=valor]: Elementos que contenham um valor
24
Seletores por hierarquia
� Ascendente Descendente:
� Seleção de descendentes de um elemento
� $('form label').css('color', 'red');
� Pai > Filho:
� Seleção de filhos de um elemento
� $('div > *').css('background', 'red');
25
� $('div > *').css('background', 'red');
� Anterior + Próximo:
� Seleção do elemento seguinte
� $('label + input').css('background', 'red');
� Anterior ~ Irmãos:
� Seleção dos elementos irmãos
� $('#inicio ~ div').css('background', 'blue');
Exercícios
1. Exibir em azul todos os parágrafos <p> da página.
2. Exibir com texto em vermelho e fundo laranja todos os cabeçalhos <h1> da 
página.
3. Exibir em negrito todos os conteúdos que estejam contidos na tag <span> da 
página.
4. Exibir em itálico todos os parágrafos <p> que pertençam a classe "citacao".
5. Fazer com que todos os elementos marcados com a classe "external" sejam 5. Fazer com que todos os elementos marcados com a classe "external" sejam 
marcados com uma borda vermelha.
6. O elemento com id "myTable" foi atribuído a uma tabela da página. Formate 
apenas essa tabela com fonte Arial.
7. Aplicar fundo amarelo para todos os cabeçalhos <h2> e <h3>.
8. Aplicar a cor de texto verde para as tag´s <p> que estejam dentro de uma div 
com id igual a "ambiental".
9. Aplicar fundo branco a todos os botões de formulários.
10. Aplicar cor azul ao texto de label´s contidos em formulários.
26
Efeitos
• show • fadeIn• show
• hide
• toggle
• slideDown
• slideUp
• slideToggle
• fadeIn
• fadeOut
• fadeTo
• animate
• delay
• stop
Efeitos
� As tarefas de esconder e revelar 
conteúdos com transições suaves é 
uma funcionalidade jQuery que 
pode enriquecer a experiência do pode enriquecer a experiência do 
usuário.
� Efeitos podem ser úteis para 
criação de menus, galerias de 
fotos, transição de conteúdo, etc.
28
Efeitos show() e hide()
� Os efeitos show() e hide() são usados, 
respectivamente, para revelar e ocultar 
um elemento seletorJQuery.
� $(‘div’).show();
� $(‘div’).hide();
� Opcionalmente, é possível passar um � Opcionalmente, é possível passar um 
parâmetro duração que permite 
revelar/ocultar suavemente um elemento.
� $(‘div’).show(1000);
� Valores pré-definidos:
� fast equivale a 200ms
� normal equivale a 400ms
� slow equivale a 600ms
29
Efeito show()
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
div{background:blue;width:300px;height:200px;display:none;}
</style>
</head>
<body>
<input type="button" value="show">
<div></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('input').click(function() {
$('div').show('slow');
});
</script>
</html>
30
Efeito hide()
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
div{background:blue;width:300px;height:200px;display:block;}
</style>
</head>
<body>
<input type="button" value="hide">
<div></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('input').click(function() {
$('div').hide('slow');
});
</script>
</html>
31
Exercícios
1. Criar 2 botões na mesma página, um 
para exibir a div e outro para ocultá-
la.
2. Utilizar um único botão na página e 
fazer com que a div seja exibida e 
ocultada de forma intercalada a cada 
clique no botão.
32
Efeito toggle()
� O método toggle() permite criar p 
efeito de alternância de visibilidade do 
elemento definido por seletorJQuery.
$('input').click(function() {
$('div').toggle();
});
33
slideDown, slideUp e slideToggle
� São efeitos para exibir/ocultar, fazendo a 
transição por meio do aumento/diminuição 
gradativo da altura de um elemento 
seletorJQuery.
� $(‘div’).slideDown();� $(‘div’).slideDown();
� $(‘div’).slideUp();
� Opcionalmente, é possível usar o método 
slideToggle para causar o efeito de 
alternância de visibilidade do elemento.
� $(‘div’).slideToggle();
34
Efeito slideDown (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
#titulo{
background:#68838B;
width:270px;
height:20px; height:20px; 
padding: 0px 5px 0px 5px;
}
#corpo{
background:#9AC0CD;
width:270px;
height:80px; 
padding:5px 5px 5px 5px;
display: none;
}
</style>
</head>
35
Efeito slideDown (2/2)
<body>
<div id="titulo">O que é jQuery?</div>
<div id="corpo">
jQuery é uma biblioteca JavaScript cross-browser 
desenvolvida para simplificar os scripts client 
side que interagem com o HTML.
</div></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#titulo').click(function() {
$('#corpo').slideDown('slow');
});
</script>
</html>
36
Efeito slideUp (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
#titulo{
background:#68838B;
width:270px;
height:20px; height:20px; 
padding: 0px 5px 0px 5px;
}
#corpo{
background:#9AC0CD;
width:270px;
height:80px; 
padding:5px 5px 5px 5px;
display: block;
}
</style>
</head>
37
Efeito slideUp (2/2)
<body>
<div id="titulo">O que é jQuery?</div>
<div id="corpo">
jQuery é uma biblioteca JavaScript cross-browser 
desenvolvida para simplificar os scripts client 
side que interagem com o HTML.
</div></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#titulo').click(function() {
$('#corpo').slideUp('slow');
});
</script>
</html>
38
Efeito slideToggle (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
#titulo{
background:#68838B;
width:270px;
height:20px; height:20px; 
padding: 0px 5px 0px 5px;
}
#corpo{
background:#9AC0CD;
width:270px;
height:80px; 
padding:5px 5px 5px 5px;
}
</style>
</head>
39
Efeito slideToggle (2/2)
<body>
<div id="titulo">O que é jQuery?</div>
<div id="corpo">
jQuery é uma biblioteca JavaScript cross-browser 
desenvolvida para simplificar os scripts client 
side que interagem com o HTML.
</div></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#titulo').click(function() {
$('#corpo').slideToggle('slow');
});
</script>
</html>
40
fadeIn, fadeOut e fadeToggle
� São efeitos para exibir/ocultar, fazendo a 
transição por meio do aumento/diminuição 
gradativo da opacidade de um elemento 
seletorJQuery.
� $(‘div’).fadeIn();� $(‘div’).fadeIn();
� $(‘div’).fadeOut();
� Opcionalmente, é possível usar o método 
fadeTo para causar o efeito de alternância 
de visibilidade do elemento.
� $(‘div’).fadeToggle();
41
Efeito fadeIn
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
#div { background:#68838B; width:500px; height:15px; }
#img { background:#C6E2FF; width:500px; display:none;}
</style>
</head></head>
<body>
<div id="div">fadeIn</div>
<img id="img" src="../img/jquery.png" />
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#div').click(function() {
$('#img').fadeIn('slow');
});
</script>
</html>
42
Efeito fadeOut
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
#div { background:#68838B; width:500px; height:15px; }
#img { background:#C6E2FF; width:500px; display:block; }
</style>
</head></head>
<body>
<div id="div">fadeOut</div>
<img id="img" src="../img/jquery.png" />
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#div').click(function() {
$('#img').fadeOut('slow');
});
</script>
</html>
43
Efeito fadeToggle
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
#div { background:#68838B; width:500px; height:15px; }
#img { background:#C6E2FF; width:500px; }
</style>
</head></head>
<body>
<div id="div">fadeToggle</div>
<img id="img" src="../img/jquery.png" />
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#div').click(function() {
$('#img').fadeToggle('slow');
});
</script>
</html>
44
Efeito animate()
� O método animate() permite criar 
animações personalizadas.
� Somente propriedades CSS de valor 
numérico podem ser animadas.
Os valores configurados nos parâmetros � Os valores configurados nos parâmetros 
são os valores finais da animação.
� É possível usar unidades em %, como 
{width:’110%’}
� além dos operadores += e -=, como 
{left:’+=10px’}
45
Efeito animate()
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
#div { 
position:absolute;height:50px;width:50px;background:red;
}
</style></style>
</head>
<body>
<div id="div"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#div').click(function() {
$('#div').animate({left:'300px'});
});
</script>
</html>
46
animate() – efeitos encadeados
<script>
$('#div').click(function() {
$('#div')
.animate({
left: '+=300px'left: '+=300px'
})
.animate({
left: '-=300px'
});
});
</script>
47
Exercícios
� Criar 2 animações para que os 
objetos façam as trajetórias de uma 
quadrado e de um triângulo.
48
1
2
3
4 1
2
3
Efeito delay() – pausar a animação
<script>
$('#div').click(function() {
$('#div')
.animate({
left: '+=300px', 
opacity: '0.1', 
width: '25px',
height: '25px'
49
height: '25px'
})
.delay(2000)
.animate({
left: '-=300px', 
opacity: '1.0', 
width: '50px',
height: '50px'
});
});
</script>
Efeito stop() – parar a animação
...
<body>
<input id="start" type="button" value="Start" />
<input id="stop" type="button" value="Stop" />
<div id="div"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
50
<script>
$('#start').click(function() {
$('#div').animate({left:'+=1000px'}, 3000);
});
$('#stop').click(function() {
$('#div').stop();
});
</script>
</html>
Callback
� Executar uma função em callback significa 
que somente após a primeira rotina for 
finalizada é que a segunda rotina é 
disparada.
� Usar callback garante que uma rotina que 
dependa da anterior não seja executada 
antes que esteja devidamente preparada.
� seletor.efeito(animação, duração, callback);
51
Callback (cont.)
� Por exemplo, imagine que você deseja 
movimentar uma DIV e, após a 
animação, apresentar uma mensagem.
$('#div').animate({left:'+=500px', width:'150px'},2000);$('#div').animate({left:'+=500px', width:'150px'},2000);
$('#div').html('jQuery');
� Aparentemente, o código acima faria 
isso, mas, na prática, os dois comandos 
são executados simultaneamente.
� O texto irá aparecer antes da animação terminar.
52
Callback (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>jQuery - Callback</title>
<style>
#div {
53
position:absolute;
height:50px;
width:50px;
background:red;
font-size:40px;
text-align:center;
}
</style>
</head>
Callback (2/2)
<body>
<div id="div"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#div').click(function() {
$('#div')
54
$('#div')
.animate(
{left:'+=500px', width:'150px'},
2000, 
function() { $('#div').html('jQuery'); }
);
});
</script>
</html>
Exercício:
Faça uma página web que contenha: 
Na definição dos estilos deve possuir duas classes:
Classe destaque -> Fonte: 15px | Cor da fonte: Vermelho
Classe normal -> Fonte: 11px | Cor da fonte: Verde 
A página deverá conter três botões (input). 
Botão1: id bt1 | Botão 2: id bt2 | Botão 3: id bt3. 
O conteúdo da página será: 
<p><strong class="destaque">Aula 1 </strong><br/> Criação de página web</p> <p><strong class="destaque">Aula 1 </strong><br/> Criação de página web</p> 
<p><strong>Aula 2 </strong><br/> Criação de banco de dados</p> 
<p><strong class="normal">Aula 3 </strong><br/> Criação de sistema completo</p> 
Ações dos botões 
Botão 1: 
-fazer com que os elementos da classe normal fiquem com o fundo laranjado. 
Botão 2:
- fazer com que os elementos strong descendentes de p tenham fonte amarela. 
Botão 3: 
- fazer com que o botão 2 desapareça
- o fundo do botão 1 fique em azul 
- todos os strong fiquem com fonte 20 
55
Comandos de Manipulação
• css
• html
• addClass
• removeClass
• text
• append
• empty
• val
• attr
• removeAttr
• prop 56
• each
• index
• eq
• find
• not
• next
• offset
Método css()
� Todas as propriedades CSS podem 
ser acessadas por jQuery.
� Propriedades com nome composto 
devem ser substituídas suprimindo o devem ser substituídas suprimindo o 
hífen e colocando a primeira letra da 
segunda palavra em maiúsculo.
� Exemplo: propriedade CSS font-family
$(‘p’).css(‘fontFamily’, ‘arial’);
57http://www.blooberry.com/indexdot/css/propindex/all.htm
css() - Tabela zebrada
...
<table>
58
<table>
<tr><td>Mouse</td><td>R$ 39,00</td></tr>
<tr><td>Teclado</td><td>R$ 45,00</td></tr>
<tr><td>Impressora</td><td>R$ 299,00</td></tr>
<tr><td>Pen Drive</td><td>R$ 85,00</td></tr>
<tr><td>Notebook</td><td>R$ 2.999,99</td></tr>
</table>
...
<script>
$('tr:even').css('background', '#C6E2FF');
</script>
Método html()
� O método html() do jQuery permite 
que você inclua um texto com tags 
HTML dentro do elemento indicado. 
� Permite também a operação inversa: 
Obter o que existe (com a codificação 
HTML) dentro de um elemento.
59
html() – mudar conteúdo da div
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
</head>
<body>
<input type="button" value="Clicar" />
60
<div id="conteudo"><p>Clique no botão!</p></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('input').click(function() {
$('#conteudo').html('<p>Botão pressionado!</p>');
});
</script>
</html>
Método text()
� Assim como o método html(), o 
método text() também inclui texto 
dentro de um elemento, mas não dentro de um elemento, mas não 
considera os tags HTML.
61
text() – conteúdo de texto puro
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
</head>
<body>
<input type="button" value="Clicar" />
<div id="conteudo"><p>Clique no botão!</p></div>
62
<div id="conteudo"><p>Clique no botão!</p></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('input').click(function() {
html = $('#conteudo').html();
text = $('#conteudo').text();
alert('html:'+ html + '\ntext: ' + text);
});
</script>
</html>
Método append()
� Anexar conteúdo html ao final do elemento
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
</head>
63
<body>
<p id="adicionar">Adicionar Parágrafo</p>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#adicionar').click(function(){
$('body').append('<p>Novo Parágrafo</p>');
});
</script>
</html>
Método empty()
� Excluir o conteúdo de um elemento.
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
64
<meta charset="UTF-8" />
<title>jQuery</title>
<style>span{cursor: pointer;}</style>
</head>
<body>
<span id="adicionar">Adicionar</span> |
<span id="limpar">Limpar</span>
<div id="conteudo"></div>
</body>
empty() – excluir conteúdo
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$('#adicionar').click(function(){
$('#conteudo').append('Nova linha <br />');
});
65
});
$('#limpar').click(function(){
$('#conteudo').empty();
});
</script>
</html>
Método val()
� O método val() obtém o valor de um 
campo do formulário.
...
<input type="text" name="frase" id="frase" />
<input type="button" value="Adicionar" id="adicionar" />
<div id="conteudo"></div>
66
<div id="conteudo"></div>
...
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$('#adicionar').click(function(){
frase = $('#frase').val();
$('#conteudo').append(frase + '<br />');
});
</script>
Método attr()
� O método attr() altera e retorna atributos 
e valores de elementos selecionados.
...
<body>
<input id="carregar" type="button" value="Carregar" /> <br />
67
<input id="carregar" type="button" value="Carregar" /> <br />
<img id="imagem" />
</body>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$('#carregar').click(function(){
$('#imagem').attr('src','../img/jquery.png');
});
</script>
</html>
Método removeAttr()
� Remove atributos de um elemento.
...
<script>
$('#carregar').click(function(){
if($('#carregar').attr('value')=='Carregar') {
68
if($('#carregar').attr('value')=='Carregar') {
$('#imagem').attr('src','../img/jquery.png');
$('#carregar').attr('value','Remover');
}
else {
$('#imagem').removeAttr('src');
$('#carregar').attr('value','Carregar');
}
});
</script>
Método prop() (a partir jQuery 1.6)
� Use prop() ao invés de attr() para atributos 
booleanos como disabled, checked, selected, etc.
// desabilitar os botões do formulário
$('#myForm').find('#button').prop('disabled', true);
69
// habilitar os inputs do formulário
$('#myForm').find('input').prop('disabled', false);
// marcar todos os checkboxs como ativos
$('#myForm').find(':checkbox').prop('checked', true);
// desmarcar todos os combobox
$('#myForm').find('select').prop('selected', false);
Exercício
� Criar uma galeria com 5 fotos em 
miniatura. Ao clicar numa das miniaturas, 
ela deve ser exibida ampliada.
70
Manipulação de Classes CSS
� Existem 4 métodos para 
manipulação de classes CSS 
definidas através de folha de estilo.
� addClass() – adiciona uma classe
� removeClass() – remove uma classe
� toggleClass() – alterna uma classe
� hasClass() – verifica se existe a classe
71
addClass() e removeClass() (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
.normal { 
position: absolute;
height: 100px; 
width: 400px; 
72
width: 400px; 
opacity: 0.5
}
.destacar { 
height: 110px; 
width: 440px; 
opacity: 1.0
}
</style>
</head>
addClass() e removeClass() (2/2)
<body>
<img id="img" class="normal" src="../img/jquery.png" />
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#img').hover(
function() {
73
function() {
$(this).addClass('destacar');
},
function() {
$(this).removeClass('destacar');
}
);
</script>
</html>
Método each()
...
<ul>
<li>Pen Drive</li>
<li>Impressora</li>
<li>Disquete</li>
<li>Zip Drive</li>
<li>Notebook</li>
</ul>
74
</ul>
...
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('li').each(function(i){
$(this).css('color', (i%2) ?'#F00' :'#00F');
});
</script>
Atribuito length
...
<ul>
<li>Pen Drive</li>
<li>Impressora</li>
<li>Disquete</li>
<li>Zip Drive</li>
<li>Notebook</li>
75
<li>Notebook</li>
</ul>
...
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
var qtde = $('li').length;
alert('Existem ' + qtde + ' itens na lista.');
</script>
Método index()
� O método index retorna a posição de 
um elemento.
� A primeira posição é 0.
� Retorna -1 se o index não existir
...
76
...
<p>1° Parágrafo</p>
<p>2° Parágrafo</p>
<p>3° Parágrafo</p>
...
<script>
$('p').click(function() {
alert('Índice: ' + $(this).index());
});
</script>
Método eq()
� O método eq retorna uma determinada 
ocorrência do conjunto selecionado.
� A primeira posição é 0
...
77
...
<p>1° Parágrafo</p>
<p>2° Parágrafo</p>
<p>3° Parágrafo</p>
...
<script>
$('p').eq(2).css('color','red');
</script>
Método find()
� O método find retorna os elementos 
descendentes de um elemento 
selecionado.
78
...
<p>Usar <span>jQuery</span> é <span>fantástico</span>!</p>
...
<script>
$('p').find('span').css('color', 'red');
</script>
Método not()
...
<p>HTML</p>
<p class="par">CSS</p>
� O método not, ao contrário de find, retorna 
os elementos que não satisfaçam do seletor.
<p>jQuery</p>
<p class="par">AJAX</p>
...
<script>
$('p').not('.par').click(function(){
$(this).css('color', 'red');
});
</script>
79
Método next()
� Use next() para selecionar o próximo elemento.
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
</head>
80
<body>
<h3>h3</h3>
<p>p</p>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('h3').append(': atual');
$('h3').next().append(': próximo');
</script>
</html>
Método offset()
� O método offset acessa/modifica o 
valor das coordenadas CSS top e left de 
um elemento.
...
81
<div id="div" style="border: 1px solid blue;"></div>
...
<script>
$('#div').offset({top:'50',left:'80'});
var coord = $('#div').offset();
alert('top: ' + coord.top + '\nleft: ' + coord.left);
</script>
Exercícios
� Elaborar uma página que apresente 
seu conteúdo em formato de abas.
82
Eventos
• click
• dblclick
• keydown
• keypress• dblclick
• focus
• blur
• mouseover
• mouseout
83
• keypress
• keyup
• on
• unbind
• resize
Eventos click e dblclick
...
<input type="button" /> <div></div>
...
<script>
$('input')
84
$('input')
.click(function() {
$('div').html('click');
})
.dblclick(function() {
$('div').html('dblclick');
});
</script>
Eventos focus e blur
...
<input type="text" /> <div></div>
...
<script>
$('input')
85
$('input')
.focus(function() {
$('div').html('focus');
})
.blur(function() {
$('div').html('blur');
});
</script>
Exercício
� Criar um campo de texto para um 
formulário que deverá inicialmente 
estar definido como somente leitura 
(readonly). Ao dar um duplo clique (readonly). Ao dar um duplo clique 
(dblclick) no campo, ele deverá ser 
tornar editavel. Ao perder o foco 
(blur), o campo deverá novamente se 
tornar somente leitura.
86
mouseover e mousedown
...
<input type="text" /> <div></div>
...
<script>
$('input')
87
$('input')
.mouseover(function() {
$('div').html('mouseover');})
.mouseout(function() {
$('div').html('mousedown');
});
</script>
Exercícios
� Na frase “jQuery é fantástico!”, fazer 
com que somente a palavra jQuery 
fique com cor azul ao mover o mouse fique com cor azul ao mover o mouse 
sobre (mouseover) ela. Retornar ao 
normal assim que o mouse sair de 
cima (mouseout).
88
keydown, keypress e keyup
...
<script>
$('input')
.keydown(function() {
$('div').append('keydown ');
})
89
})
.keypress(function() {
$('div').append('keypress ');
})
.keyup(function() {
$('div').append('keyup ');
});
</script>
Exercício
� Criar um campo de texto para 
consulta no estilo do Google, em que 
a cada tecla lida (keyup) deve-se a cada tecla lida (keyup) deve-se 
consultar em uma lista de palavras 
em vetor e apresentar os itens que 
contenham a substring digitada.
� Use indexOf para localizar uma substring
90
on e unbind
...
<input type="button" /><div></div>
...
<script>
$('input').on('click', function() {
$('div').append('único click');
91
$('div').append('único click');
$('input').unbind('click');
});
</script>
A partir da API 1.7, .on substitui .bind, .live e .delegate
resize
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Resize</title>
</head>
<body>
<div id="resize"></div>
92
<div id="resize"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(window).resize(function() {
w = $(window).width();
h = $(window).height();
$('#resize').html('largura: ' + w + '<br />altura: ' + h);
});
</script>
</html>
Exercícios
� Criar uma página que deverá ter 3 imagens, 
mas apenas uma delas deverá ser exibida. Ao 
passar o mouse sobre a imagem, ela deverá ser 
levemente ampliada, voltando ao tamanho 
original ao retirar o mouse. Caso ocorra um 
duplo clique sobre a imagem, deve-se carregar duplo clique sobre a imagem, deve-se carregar 
uma caixa com as 3 imagens em miniatura. Ao 
clicar numa das imagens, deve-se fechar a 
caixa e atualizar o site com a nova imagem. A 
imagem sempre deve ser apresentada no 
centro do site. Caso a página seja 
redimensionada, a imagem deve ser 
reposicionada ao centro.
93
Formulários
Pseudo-seletores
Formulários: Pseudo-seletores
� :button Seleciona elementos do tipo button
� :checkbox Seleciona inputs com type="checkbox“
� :file Seleciona inputs com type="file"
� :image Seleciona inputs com type="image"
� :input Seleciona <input>, <textarea> e <select>� :input Seleciona <input>, <textarea> e <select>
� :password Selecionam inputs com type="password"
� :radio Selecionam inputs com type="radio"
� :reset Selecionam inputs com type="reset“
� :submit Seleciona inputs com type="submit"
� :text Seleciona inputs com type="text"
95$('#myForm :input'); // obtém todos os elementos que aceitam entrada de dados
Formulários: Seleção por Estado
� :checked Seleciona inputs selecionados
� :disabled Seleciona elementos desabilitados
� :enabled Seleciona elementos habilitados
� :selected Seleciona inputs que estão selecionados� :selected Seleciona inputs que estão selecionados
96
$('input:checked ').css('background', 'blue'); 
// pinta de azul os elementos checados
alert($('input:disabled ').length + " desabilitados."); 
// obtém a quantidade de elementos desabilitados
Exemplo – campos do form (1/2)
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="button">
<input type="checkbox"><input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select><option>Option</option></select>
<textarea></textarea>
</form>
</body>
97
Exemplo – campos do form (2/2)
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
var input = $(':input');
$('body').append('Form com ' + input.length + ' inputs.');
input.each(function() {
$('body').append('<br />' + $(this).attr('type'));
});
</script></script>
</html>
98
Formulário com 12 inputs.
button
checkbox
file
hidden
image
password
radio
reset
submit
text
undefined
undefined 
Exemplo – campo obrigatório (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style>
input { 
border: 1px solid #000; 
float: left; 
}}
div { 
display:none; 
color: #F00;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<input /> <div>Campo Obrigatório!</div>
</body>
99
Campo Obrigatório!
Exemplo – campo obrigatório (2/2)
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('input')
.focus(function() {
$(this).css('border', '1px solid #000');
$(this).next().css('display', 'none');
})
.blur(function() {
if($(this).val()=='') {
$(this).css('border', '1px solid #F00');
$(this).next().css('display', 'block');
}
});
</script>
</html>
100
Exemplo – seletor :checkbox (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<style> fieldset { width:150px; } </style>
</head>
<body>
<form>
<fieldset id="marca">
<legend>Marcas:<input type="checkbox" id="todos" /></legend>
<input type="checkbox" /><label>Audi</label><br />
<input type="checkbox" /><label>BMW</label><br />
<input type="checkbox" /><label>Mercedes</label><br />
<input type="checkbox" /><label>Porche</label><br />
<input type="checkbox" /><label>Ferrari</label><br />
</fieldset>
<input type="button" id="enviar" value="Enviar" />
</form>
</body>
101
Exemplo – seletor :checkbox (2/2)
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#todos').click(function() {
$('#marca').find(':checkbox').prop('checked', this.checked);
});
$('#enviar').click(function() {
qtde = $('#marca').find(':checked').not('#todos').size();
alert('Foram selecionadas ' + qtde + ' marcas.');
});
</script>
</html>
102
Exemplo – select change
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
</head>
<body>
<select name="uf" id="uf">
<option value="SP">São Paulo</option>
<option value="RJ">Rio de Janeiro</option><option value="RJ">Rio de Janeiro</option>
<option value="MG">Minas Gerais</option>
</select>
<div></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('select[id=uf]').change(function() { //$('#uf').change
$('div').html($('select[name=uf]').val()); 
});
</script>
</html>
103
Eventos Especiais do 
Carregamento da Página
$(document).ready()
$(window).load()
104
Carregamento da Página Completo
� Existem duas formas de executar 
seu script jQuery somente após sua 
página já estiver completamente 
carregada:
� $(document).ready()
� $(window).load()
105
$(document).ready()
� O objeto document esta relacionado 
a todos os elementos da página. 
Então você pode ter certeza que 
quando ele estiver carregado, é sinal quando ele estiver carregado, é sinal 
que os elementos HTML já poderão 
ser afetados pelo seu script.
$(document).ready(function() {
$('body').text('document está carregado');
});
106
$(window).load()
� Usar o objeto window significa que 
essa função só será executada 
quando todo html, imagens, frames, 
scripts, enfim, quando a página scripts, enfim, quando a página 
estiver completamente carregada, ele 
executará esta função. 
$(window).load(function() {
$('body').text('window está carregado');
});
107
Exemplo – document e window
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Métodos jQuery para executar Script</title>
</head>
<body></body></body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(window).load(function() {
$('body').append('window está carregado.<br />');
});
$(document).ready(function() {
$('body').append('document está carregado.<br />');
});
</script>
</html>
108
Tempo de carregamento (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
var enter = new Date();
$(document).ready(function() {
var loadDoc = (new Date()).getTime() - enter.getTime();
$('#doc').text('$(document).ready(): ').append(loadDoc + ' ms');
});
$(window).load(function() {
var loadWin = (new Date()).getTime() - enter.getTime();
$('#win').text('$(window).load(): ').append(loadWin + ' ms');
});
</script>
</head>
109
Tempo de carregamento (2/2)
<body>
<h3 id="doc"></h3>
<hr />
<h3 id="win"></h3>
<img src="https://www.google.com.br/images/srpr/logo11w.png" />
</body>
</html>
110
O método document é executado assim que as tags html
são carregadas, enquanto o método window só executado 
após o carregamento da imagem do site.
Criando Novos Plugins
(function($){$.fn … })(jQuery);
Criando Funções e Plugins
� Encapsulamento e reaproveitamento 
de código são as palavras-chave.
� Úteis pois facilitam o processo de 
desenvolvimento, diminuindo o 
tempo/custo para a implementação. tempo/custo para a implementação. 
� Sempre haverá um único ponto de 
manutenção, caso tenha que ser alterada.
112
Podemos criar nossos próprios plugins ou usar inúmeros 
plugins prontos e disponibilizados na Internet.
Plugin Básico
1. Criando um plugin
$.fn.azul = function() { 
return $(this).css('color', 'blue');
};};
2. Evocando a função
$('p').azul();
113
Todos os parágrafos <p> ficarão em azul
Criando Novos Plugins
// evitar conflito com outros frameworks
(function($){
// plugin para azul
$.fn.azul = function() { 
return $(this).css('color', 'blue');
};
// plugin para amarelo// plugin para amarelo
$.fn.verde= function(){
return $(this).css('color', 'green');
}
})(jQuery);
...
// parágrafos em azul e links internos em verde
$('p').azul().find('a').verde();
114
Plugins – Passagem de Parâmetro 
(function($){
$.fn.cor = function($cor) { 
return $(this).css('color', $cor);
};
})(jQuery);
...
$('p').cor('blue').find('a').cor('green');
115
Com uso de parâmetro, com uma única 
função, é possível selecionar qualquer cor.
Plugins – Objeto como Parâmetro 
(function($){
$.fn.cores = function(option){
var config = {
corTexto: 'black',
corFundo: 'gray'
}
var app = $.extend(config, option);
var css = {var css = {
color: app.corTexto,
background: app.corFundo
}
return this.css(css);
}
})(jQuery);
$('h1').cores();
$('p').cores({corTexto:'white', corFundo:'red'});
$('a').cores({corFundo:'orange'});
116
Exemplos
AnimaçãoAnimação
SlideShow
Accordion
WindowModal
Exemplo 1 - Animação (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>jQuery - Animação</title>
<style>
#img {
position:absolute;
width:100px;
118
width:100px;
height:25px;
top:50px;
left:50%;
margin-left:-50px;
}
</style>
</head>
<body>
<img id="img" src="../img/jquery.png" />
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
Exemplo 1 - Animação (2/2)
<script>
$(window).load(function() {
var start = false;
$('#img').click(function() {
if(!start) {
start = true;
$('#img')
.animate({top:'+=300px', opacity:'0.1', width:'500px', 
height:'120px', marginLeft:'-250px'},1000)
119
.animate({top:'+=30px', opacity:'0.5'},1000)
.fadeTo(500, 1.0)
.delay(2000)
.animate({left:'+=800px', opacity:'0.0', width:'100px', 
height:'25px'}, 'fast')
.animate({left:'50%',marginLeft:'-50px',top:'50px'}, 1000)
.fadeTo(1000, 1.0, function() { start = false; });
}
});
});
</script>
</html>
Exemplo 2 - SlideShow (1/3)
// slideShow.js
(function($){
$.fn.slideShow = function(settings){
var config = {'delay': 2000, 'fadeSpeed': 500};
$.extend(config, settings);
var img = this.children('img');
var count = img.length;
var i = 0;
120
var i = 0;
img.eq(0).show();
setInterval(function(){
img.eq(i++).hide(config.fadeSpeed);
if(i==count) i=0;
img.eq(i).show(config.fadeSpeed);
}, config.delay);
return this;
};
})(jQuery);
Exemplo 2 - SlideShow (2/3)
<style>
#slideshow img {
position: absolute;
display: none;
width: 300px;
height: 200px;
top: 50px;
left: 50%;
margin-left: -150px;
121
margin-left: -150px;
}
</style>
<body>
<div id="slideshow">
<img src="../img/image1.png" />
<img src="../img/image2.png" />
<img src="../img/image3.png" />
<img src="../img/image4.png" />
</div>
</body>
Exemplo 2 - SlideShow (3/3)
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="slideShow.js"></script>
<script>
$(window).load(function() {
$('#slideshow').slideShow();
});
</script>
122
</script>
</html>
Note que o código do plugin foi colocado em arquivo 
separado, o que permite fazer reuso
Exemplo 3 - Accordion (1/4)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>jQuery Accordion</title>
<style>
.accordion {
position: absolute;
123
position: absolute;
width: 300px;
height: 345px;
top: 50px;
left: 50%;
margin-left: -150px;
padding-bottom: 3px;
border: 1px dotted #666;
background: #CCC;
}
Exemplo 3 - Accordion (2/4)
.titulo {
border: 1px solid #666;
background: #BBB;
margin: 4px 3px 0px 3px;
}
.conteudo {
height: 265px;
124
height: 265px;
padding: 0px 8px 3px 8px;
display: none;
overflow-y: auto;
}
p {
margin-top: 2px;
}
</style>
Exemplo 3 - Accordion (3/4)
<body>
<div class="accordion">
<div class="titulo">HTML</div>
<div class="conteudo">
<p>HTML é uma linguagem de marcação utilizada para produzir páginas na 
Web. Documentos HTML podem ser interpretados por navegadores.</p>
</div>
<div class="titulo">CSS</div>
<div class="conteudo">
125
<div class="conteudo">
<p>CSS é uma linguagem para estilos que define o layout de documentos 
HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, 
alturas, larguras, imagens de fundo e posicionamentos.</p>
</div>
<div class="titulo">JQUERY</div>
<div class="conteudo">
<p>jQuery é uma biblioteca JavaScript cross-browser desenvolvida para 
simplificar os scripts client side que interagem com o HTML.</p>
</div>
</div>
</body>
Exemplo 3 - Accordion (4/4)
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function() {
$('.conteudo').eq(0).css('display','block');
$('.titulo').click(function() {
$('.conteudo').slideUp('fast');
$(this).next().slideDown();
});
126
});
});
</script>
</html>
Exemplo 4 – WindowModal (1/4)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Janela Modal</title>
<style>
#janela{
display: none;
width: 300px;
position: absolute;
left: 0;
127
left: 0;
top: 0;
background: #FFF;
z-index: 9900;
padding: 5px 5px 5px 15px;
border-radius: 10px;
}
#fechar{
display:block; 
float: right;
cursor: pointer;
width: 28px;
height: 28px;
}
Exemplo 4 – WindowModal (2/4)
#mascara{
display:none;
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #000;
opacity: 0.6;
}
128
#titulo {
font-family: Verdana, Arial;
font-size: 24px;
font-weight: bold;
margin-top: 1px;
margin-bottom: -7px;
}
</style>
</head>
<body>
<div id="mascara"></div>
<input type="button" value="Modal" id="btnModal" />Exemplo 4 – WindowModal (3/4)
<div id="janela">
<img src="../img/close.png" id="fechar" />
<p id="titulo">Janela Modal</p>
<p>A criação de janela tipo modal é feita através uma camada 
transparente que ocupa toda a janela do browser.</p>
<p>Depois é exibido um box com o texto da janela modal sobre essa 
camada. </p>
</div>
</body>
<script src="../jquery/jquery-2.0.3.js"></script>
129
<script src="../jquery/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnModal').click( function(){
$('#janela').modalShow();
});
$('#fechar, #mascara').click(function(){
$('#janela').modalHide();
});
$(window).resize(function() {
$('#janela').modalResize();
});
Exemplo 4 – WindowModal (4/4)
$.fn.modalShow = function() { 
largura = $(window).width();
altura = $(window).height();
horizontal = (largura/2) - ($(this).width()/2);
vertical = (altura/2) - ($(this).height()/2);
$('#mascara').css({'width':largura, 'height':altura});
$('#mascara').fadeIn('fast');
$(this).css({'top':vertical, 'left':horizontal}).show();
};
130
};
$.fn.modalHide = function() {
$(this).hide();
$('#mascara').fadeOut('fast');
};
$.fn.modalResize = function() {
if($('#mascara').css('display')=='block') {
$(this).modalShow();
}
};
});
</script>
</html>
Exemplos de plugins prontos
� http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
� http://johnpolacek.github.io/superscrollorama/
� http://jquery.malsup.com/cycle/
� http://www.jacklmoore.com/colorbox/example1/
� http://razorjack.net/quicksand/
� http://www.smartmenus.org/
� http://www.jssor.com/
� http://tympanus.net/codrops/2011/04/28/rotating-image-slider/
� http://tympanus.net/Tutorials/ParallaxSlider/
� http://www.starplugins.com/cloudzoom
131
Trabalho
� Pesquisar um plugin jQuery, 
entender seu funcionamento 
e criar uma página que faça e criar uma página que faça 
uso desse plugin.
132
AJAX
133
AJAX
� AJAX (acrônimo de Asynchronous Javascript And XML) 
é o uso metodológico de tecnologias como 
Javascript e XML, providas por browsers, para 
tornar páginas web mais interativas com o 
usuário, utilizando-se de solicitações assíncronas usuário, utilizando-se de solicitações assíncronas 
de informações ao servidor. 
� Os três princípios de Ajax:
� O navegador hospeda uma aplicação e não conteúdo
� O servidor fornece dados e não conteúdo
� A interação do usuário com a aplicação é flexível e contínua
134
Requisição HTTP: Normal x AJAX
135
Ajax sem jQuery
� Até pouco tempo atrás, para utilizar 
técnicas AJAX eram necessários 
conhecimentos sobre o método 
XMLHttpRequest.XMLHttpRequest.
� Isso resultava em enormes funções 
escritas em Javascript e muito 
trabalho ao desenvolvedor.
136
conteudo.php
<?php
sleep(1); //aguardar 1 segundo
@$key = $_REQUEST['key'];
if(empty($key))
echo 'Requisição Ajax!';
elseelse
echo 'Valor enviado ao servidor: '. $key;
?>
137
Obs.1: O valor recebido pelo servidor poderia, por exemplo, ser
utilizado como parâmetro a uma consulta ao banco de dados.
Obs.2: A partir de agora, trabalharemos com PHP, portanto, é
necessário iniciar o servidor Apache.
Ajax sem jQuery (1/3)
<!-- ajax.html -->
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Ajax (sem jQuery)</title>
<script src="ajax.js"></script><script src="ajax.js"></script>
</head>
<body>
<input type = "button" 
value = "Carregar"
id = "btnCarregar"
onclick = "ajax('conteudo.php','destino');">
<div id="destino"></div>
</body>
</html>
138
Ajax sem jQuery (2/3)
<!-- ajax.js -->
var id;
function ajax(url,local) {
id = local;
req = null;
// Procura por um objeto nativo (Mozilla/Safari)
if (window.XMLHttpRequest) {
document.getElementById(id).innerHTML = '<img src="wait.gif">';
req = new XMLHttpRequest();
req.onreadystatechange = processarRequest;req.onreadystatechange = processarRequest;
req.open("GET",url,true);
req.send(null);
}
// Procura por uma versão ActiveX (IE)
else if (window.ActiveXObject) {
document.getElementById(id).innerHTML = '<img src="wait.gif">';
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = processarRequest;
req.open("GET",url,true);
req.send();
}
}
139
Ajax sem jQuery (3/3)
function processarRequest(){
if (req.readyState == 4){ // apenas quando estiver "completo“
if (req.status == 200){ // apenas se o servidor retornar "OK“
// procura pela div id="id" e insere o conteúdo como HTML
document.getElementById(id).innerHTML = req.responseText;
}
else{
alert("Problema ao obter os dados: " + req.statusText);
}
}
}
140
Ajax com jQuery
� Hoje, podemos utilizar bibliotecas 
como o jQuery para tornar o 
trabalho com AJAX muito simples.
� Por ser cross-browser, não há 
necessidade de nenhum tratamento 
adicional para qualquer navegador.
141
Métodos jQuery para AJAX
� load
� Método simples, usado para carregar conteúdos 
num seletor, com poucos tratamentos adicionais.
� get
� Usado para requisições com GET.� Usado para requisições com GET.
� post
� Usado para requisições com POST.
� ajax
� Método mais geral e flexível (permite GET ou POST) 
para manipular os resultados retornados.
142
Método $load()
� O método $load() executa uma 
requisição Ajax com o servidor.
� Sintaxe:� Sintaxe:
� $load(url, [data], [callback])
� url - a ser carregada
� data – dados enviados ao servidor (opcional)
� callback – função executada após o 
retorno da requisição (opcional)
143
Ajax com jQuery – load()
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Ajax (com jQuery)</title>
</head>
<body>
<input type="button" value="Carregar" id="btnCarregar">
144
<input type="button" value="Carregar" id="btnCarregar">
<div id="destino"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#btnCarregar').click(function(){
$('#destino').load("conteudo.php");
});
</script>
</html>
Podem ser carregados arquivos .html, .php, .xml, .txt, ...
Enviando parâmetros – load()
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
</head>
<body>
<input type="button" value="Carregar" id="btnCarregar">
<div id="destino"></div>
145
<div id="destino"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#btnCarregar').click(function(){
$('#destino').load('conteudo.php', {'key': 'jQuery'});
});
</script>
</html>
Será enviado ao servidor uma chave ‘key’ com valor ‘jQuery’
Parâmetro por variável – load()
...
<input type="text" name="key" id="key" />
<input type="button" value="Carregar" id="btnCarregar" />
<div id="destino"></div>
146
...
<script>
$('#btnCarregar').click(function(){
$('#destino').load('conteudo.php',{'key':$('#key').val()});
});
</script>
Será enviado ao servidor uma chave ‘key’ com valor ‘jQuery’
Tratando callback - load()
...
<script>
$('#btnCarregar').click(function(){
$('#destino').load('c.html', function(response, status, xhr){
if(status == 'error'){
147
if(status == 'error'){
$(this).html('ERRO: '+ xhr.status +' '+ xhr.statusText);
}
});
});
</script>
Um erro acontecerá se o arquivo c.html não existir.
Exercício
� Modificar o exemplo de envio de parâmetro ao 
servidor por ajax de forma que o botão 
“Carregar” seja desabilitado durante o 
processamento da requisição. 
� Ou seja, após ser clicado, o botão deve ser desativado � Ou seja, após ser clicado, o botão deve ser desativado 
e deverá ficar ativo novamente somente após o 
término da chamada da função load (callback).
� Isso impediráque o usuário clique novamente no botão 
enquanto a requisição estiver sendo processada. 
� Uma ampulheta deve ser exibida durante o 
processamento da requisição.
148
Menu
� Objetivo:
� Criar um menu que carregue os conteúdos da página.
149
� Criar um menu que carregue os conteúdos da página.
� Requisitos:
� Usar Ajax para que a página não seja recarregada.
� Pegar o link a ser carregado diretamente no atributo href da tag <a>.
Menu com Ajax – load()
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Menu usando Ajax</title>
</head>
<body>
<a class="menu_item" href="pagina1.html">Página 1</a> |
<a class="menu_item" href="pagina2.html">Página 2</a> |
150
<a class="menu_item" href="pagina3.html">Página 3</a>
<div id="content"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('.menu_item').click(function(){
var url = $(this).attr('href');
$('#content').load(url);
return false;
});
</script>
</html>
Exemplo de menu
151
Menu com Ajax (1/2)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div id="container">
<div id="mainpic">
152
<h1>RIA<span class="lighter"> by AJAX</span></h1>
<h2>Rich Internet Application</h2>
</div> 
<div id="menu">
<a class="menu_item" href="ajax.htm">AJAX</a>
<a class="menu_item" href="html.htm">HTML</a>
<a class="menu_item" href="css.htm">CSS</a>
<a class="menu_item" href="jquery.htm">jQuery</a>
<a class="menu_item" href="xml.htm">XML</a>
<a class="menu_item" href="php.htm">PHP</a>
</div>
<div id="content"></div>
Menu com Ajax (2/2)
</div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
// carregar o primeiro item do menu automaticamente
$('#content').load($('.menu_item').eq(0).attr('href'));
$('.menu_item').click(function(){
153
$('.menu_item').click(function(){
var url = $(this).attr('href');
$('#content').load(url, function(r,s,x) {
if(s=='error') 
$('#content').html('<p>Erro na página: '+url+'</p>');
});
return false;
});
</script>
</html>
Frase do Dia
� Objetivo:
� Criar um módulo para apresentar rotativamente uma frase do dia.� Criar um módulo para apresentar rotativamente uma frase do dia.
� Requisitos:
� Selecionar e apresentar uma frase aleatoriamente.
� Todas as frases deverão estar cadastradas no banco de dados.
Banco de Dados
Tabela tb_frase
CREATE TABLE IF NOT EXISTS tb_frase (
id integer not null auto_increment,
descricao varchar(140),
PRIMARY KEY(id)
);
Banco de Dados db_curso
CREATE DATABASE IF NOT EXISTS db_aula;
USE db_aula;
INSERIR frases
INSERT INTO tb_frase(descricao) VALUES
('O sucesso vem antes do trabalho somente no dicionário.'),
('No final tudo dá certo. 
Se ainda não deu certo, é que ainda não chegou ao fim.'),
('Você é tão jovem quanto a sua autoconfiança, tão idoso quanto seu medo,
tão moço quanto suas esperanças e tão velho quanto seu desespero.'),
('Os vencedores fazem aquilo que os perdedores não querem fazer.'),
('Se você quer ter um amigo, você precisar ser um amigo.'),
('A esperança é a última que morre.'),
('A experiência é o sabor da vida.'),
('Não diga para Deus o tamanho do seu problema.
Fale ao seu problema o tamanho de seu Deus.');
COMMIT;
frase.php
<!-- frase.php -->
<?php
$link = mysqli_connect("127.0.0.1", "root", "", "db_aula");
$sql = "SELECT descricao
FROM tb_frase
ORDER BY RAND() ORDER BY RAND() 
LIMIT 0,1";
$rs = mysqli_query($link, $sql);
$r = mysqli_fetch_array($rs);
$frase = $r['descricao'];
mysqli_close($link);
echo utf8_encode($frase);
?>
frase.css
#frase {
background: #9AC0CD;
border: 1px solid #68838B;
width:300px;
height:65px; height:65px; 
padding:5px 5px 5px 5px;
overflow-y: auto;
text-align: center;
font-family: verdana;
display: none;
}
157
frase.html
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Frase do Dia</title>
<link rel="stylesheet" href="frase.css" />
</head>
<body>
<div id="frase"></div>
158
<div id="frase"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$('#frase').load('frase.php', function() {
$(this).show();
});
});
</script>
</html>
Atualizar frase por click
$(document).ready(function(){
$('#frase').load('frase.php', function() {
$(this).slideDown(1000);
});
$('#frase').click(function() {
159
$(this).slideUp(1000, function() {
$(this).load('frase.php', function() {
$(this).slideDown(1000);
});
});
});
});
Atualizar frase por timer
$(document).ready(function(){
$('#frase').load('frase.php', function() {
$(this).fadeIn(1000);
});
setInterval(function(){
160
$('#frase').fadeOut(500, function() {
$(this).load('frase.php', function() {
$(this).fadeIn(1000);
});
});
}, 5*1000);
});
Método $.get()
� O método $.get() carrega dados 
do servidor usando uma requisição 
GET HTTP.
� Sintaxe:
� $.get(url, [data], [callback], [type])
Retorna um objetoXMLHttpRequest
161
Parâmetros $.get()
� url: Uma string contendo a URL para a qual a 
requisição será enviada.
� data: Parâmetro (opcional) que representa o 
par chave/valor que será enviado ao servidor.
� callback: Parâmetro (opcional) que representa 
uma função a ser executada após os dados 
serem carregados com sucesso.
� type: Parâmetro (opcional) que representa o 
tipo de dado a ser retornado para a chamada.
� "xml", "html", "script", "json", "jsonp", "text"
162
Exemplo $.get()
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Método $.get()</title>
</head>
<body>
<input type="button" value="Carregar" id="btnCarregar">
<div id="destino"></div>
163
<div id="destino"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#btnCarregar').click(function(){
$.get("conteudo.php", function(d) {
$('#destino').html(d);
}); 
}); 
</script>
</html>
$.get() – envio de parâmetro
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Método $.get()</title>
</head>
<body>
<input type="button" value="Carregar" id="btnCarregar">
<div id="destino"></div>
164
<div id="destino"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#btnCarregar').click(function(){
$.get("conteudo.php", {key: "jQuery"}, function(d) {
$('#destino').html(d);
}); 
}); 
</script>
</html>
$.get() – envio de parâmetro (cont.)
...
<input type="text" name="txtNome" id="txtNome">
...
<script>
$('#btnCarregar').click(function(){
$.get("conteudo.php", {key:$('#txtNome').val()}, function(d) {
165
$.get("conteudo.php", {key:$('#txtNome').val()}, function(d) {
$('#destino').html(d);
}); 
}); 
</script>
{nome:$('input').attr('name','txtNome').val()}Alternativo:
Outros métodos de callback
� Além da função padrão de callback, 
existem, ainda alguns métodos 
adicionais para tratamento do retorno:
� .done – disparado em caso de sucesso� .done – disparado em caso de sucesso
� .fail – disparado em caso de falha
� .always – disparado ao final do processo
� Os métodos .success(), .error() e .complete(), 
introduzidos na versão jQuery 1.5, estão 
obsoletos (deprecated) a partir da versão 1.8.
166
Tratamento de callback - $.get()
<script>
$('#btnCarregar').click(function(){
$.get("conteudo.php")
.done(function(d) {
$('#destino').html(d);
$('#destino').append("<br />done" );
167
})
.fail(function(code) {
$('#destino').append("<br />fail" );
})
.always(function() {
$('#destino').append("<br/>always" );
});
});
</script>
Experimente colocar uma URL inexistente para provocar um erro
Ajax com Banco de Dados
Consulta dados no banco de dados
Cadastro através de formulário
Banco de Dados - Estrutura
Tabela CONTATO
CREATE TABLE IF NOT EXISTS tb_contato(
Banco de Dados
CREATE DATABASE IF NOT EXISTS db_aula;
USE db_aula;
cod_cont integer not null auto_increment,
nome varchar(50),
endereco varchar(60),
cidade varchar(40),
fone varchar(15),
data_nasc date,
PRIMARY KEY(cod_cont)
);
169
Banco de Dados - INSERT
Inclusão de dados
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Ariana','Rua da Glória,12','Lins','(14) 3533-1234','1972-03-20');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Danilo','R. 7 Setembro,55','Bilac','(18) 3523-0022','1973-05-15');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Flavia','Av.Saudade,275','Birigui','(18) 532-3344','1980-12-25');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Henrique','R. das Flores,99','Birigui','(18) 3523-9999','1984-01-05');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Rafael','R. das Flores,66','Lins','(14) 3523-8888','1987-01-06');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Robson','Av. Saudade, 25','Araçatuba','(18) 523-3535','1980-01-15');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Samara','R. Rio Claro,45','São Paulo','(11) 3523-9999','1990-02-05');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Thiago','R. da Freguesia,6','Birigui','(18) 3523-9009','1989-08-05');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Vinicius','R. Cotia,122','Lins','(14) 3523-1234','1986-10-05');
INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('Vitor','R. Antonio Simões,4','Pongaí','(14) 3523-8080','1984-12-12');
COMMIT;
170OBS.: É possível, também, fazer a inclusão diretamente através do PHP
Consulta com Ajax (consulta.html)
<!doctype html>
<html lang="pt-BR">
<head> 
<meta charset="UTF-8" />
<title>Consulta com Ajax</title>
</head>
171
</head>
<body>
<input type="text" name="txtNome" id="txtNome">
<input type="button" value="Filtrar" id="btnCarregar">
<div id="destino"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
Consulta com Ajax (consulta.html)
<script>
$(document).ready(function(){
$('#btnCarregar').click(function(){
$(this).prop('disabled', true);
$.get("consulta.php", {filtro: $('#txtNome').val()}, 
.done(function(d) {
$('#destino').html(d);
})
172
})
.fail(function(code) {
$('#destino').html("<br />Erro ao consultar!" );
})
.always(function() {
$('#btnCarregar').prop('disabled', false);
}); 
}); 
});
</script>
</html>
Consulta com Ajax (consulta.php)
<?php
@$filtro = addslashes($_GET['filtro']);
$link = mysqli_connect("127.0.0.1", "root", "", "db_aula");
$sql = "SELECT nome, endereco, cidade, fone, data_nasc
FROM tb_contato
WHERE nome LIKE '$filtro%'";
$rs = mysqli_query($link, $sql);
if(empty($rs) OR mysqli_num_rows($rs)==0) {
173
if(empty($rs) OR mysqli_num_rows($rs)==0) {
echo "Nenhum registro localizado!";
}
else {
while($r = mysqli_fetch_array($rs)){ 
echo "{$r[0]} | {$r[1]} | {$r[2]} | {$r[3]} | {$r[4]} <br>";
}
mysqli_free_result($rs);
}
mysqli_close($link);
?>
Consulta com Ajax
Consultar contatos no banco de dados sem 
pressionar <enter>.
A pesquisa é atualizada cada tecla 
pressionada.
Consulta com Ajax (consulta.html)
<!doctype html>
<html lang="pt-BR">
<head><meta charset="UTF-8" /></head>
<body>
<input type="text" id="txtBusca" /> <div id="resultado"></div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
175
$("#txtBusca").keyup(function(e){
$.get(
"consulta.php",
{ filtro: $("input").val() },
function(result){
$("#resultado").html(result);
}
);
});
});
</script>
</html>
OBS.: Nenhuma mudança é necessário na programação PHP
Tratando caracteres de controle
$(document).ready(function(){
$("#txtBusca").keyup(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
var specialsKeys = new
Array(13,16,17,18,20,27,33,34,35,36,37,38,39,40);
if(specialsKeys.indexOf(code)>=0) return false;
$.get(
176
$.get(
"consulta.php",
{ filtro: $("input").val() },
function(result){
$("#resultado").html(result);
}
);
});
});
OBS.: Trata o browser utilizado e teclas especiais (enter, page up, end, ...)
Cadastro com Formulário
Os dados serão enviados ao servidor, que 
irá gravar no banco e retornar o status, irá gravar no banco e retornar o status, 
sem recarregar o formulário.
cadastro.html
<!doctype html>
<html>
<head> 
<meta charset="UTF-8" />
<link rel="stylesheet" href="cadastro.css" />
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="cadastro.js"></script>
</head>
<body>
<form method="GET" action="#" name="form">
178
<form method="GET" action="#" name="form">
<fieldset id="campos">
<legend>Cadastro de Contato</legend>
<label>Nome:</label><input type="text" name="nome" />
<label>Endereço:</label><input type="text" name="endereco" />
<label>Cidade:</label><input type="text" name="cidade" />
<label>Fone:</label><input type="text" name="fone" />
<label>Dt.Nasc.:</label><input type="text" name="data_nasc" />
<input type="button" value="Enviar" id="enviar" />
</fieldset>
</form>
<div id="resposta"></div>
</body>
</html>
cadastro.css
fieldset { 
width: 300px; 
}
input[type="text"], input[type="date"] { 
float: right; 
width: 200px;
height: 14px;
margin-top: 2px;
}
input[type="text"]:focus, input[type="date"]:focus {
background-color: #D1EEEE;
179
}
input[type="button"] { 
clear: both; 
float: right; 
margin-top: 5px;
}
label { 
float: left; 
height: 22px; 
width: 80px; 
}
#resposta { 
width: 300px; 
text-align: center;
}
cadastro.js
$(document).ready(function() {
$('#enviar').click(function() {
$(this).prop('disabled', true);
$.get('cadastro.php', 
{
nome: $("input[name='nome']").val(), 
endereco: $("input[name='endereco']").val(), 
cidade: $("input[name='cidade']").val(), 
fone: $("input[name='fone']").val(), 
180
fone: $("input[name='fone']").val(), 
data_nasc: $("input[name='data_nasc']").val()
},
function(data){
$('#resposta').html(data);
$('#enviar').prop('disabled', false);
},
"html"
);
});
});
Modo alternativo: $("form").serialize()
cadastro.php
<?php
@$nome = $_GET["nome"];
@$endereco = $_GET["endereco"];
@$cidade = $_GET["cidade"];
@$fone = $_GET["fone"];
@$data_nasc = $_GET["data_nasc"];
if(empty($nome) OR empty($endereco) OR empty($cidade) OR 
empty($fone) OR empty($data_nasc)) {
$msg = "Todos os campos devem ser preenchidos!";
181
$msg = "Todos os campos devem ser preenchidos!";
} 
else {
$link = mysqli_connect("127.0.0.1","root","","db_aula");
$sql = "INSERT INTO tb_contato(nome,endereco,cidade,fone,data_nasc)
VALUES('$nome','$endereco','$cidade','$fone','$data_nasc')";
$status = mysqli_query($link,$sql);
mysqli_close($link);
$msg = ($status==1) ?"Sucesso ao inserir!" :"Erro ao inserir!";
}
echo $msg;
?>
Método $.post()
� O método $.post() carrega dados 
do servidor usando uma requisição 
POST HTTP.
� Sintaxe:� Sintaxe:
� $.post(url, [data], [callback], [type])
� Realiza as mesmas tarefas que $.get(), 
mas oferece mais segurança.
� O método $.post nunca utiliza dados do 
cache.
182
Controle de Acesso
login.html
<!doctype html><html lang="pt-BR">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="login.css" />
</head>
<body>
<div id="content">
<form id="formLogin" name="formLogin" action="login.php">
184
<form id="formLogin" name="formLogin" action="login.php">
<label>Usuário:</label><input type="text" name="username" />
<label>Senha:</label><input type="password" name="password" />
<input type="submit" id="btnLogin" value="Conectar" />
</form>
<div id="message"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="login.js"></script>
</html>
login.css
body, input { 
font-family: 'Times New Roman'; 
font-size: 18px;
}
.success { 
color: #060; 
}
.error { 
color: #F00; 
}
185
}
#content {
background-color: #eee;
width: 250px;
margin: 0 auto;
border: 1px solid #aaa;
padding: 15px;
border-radius: 10px;
}
#formLogin input[type=text], #formLogin input[type=password] {
width: 245px;
margin-bottom: 15px;
}
login.js
$(document).ready(function() {
$('#btnLogin').click(function() {
$.post(
$('#formLogin').attr('action'), 
$('#formLogin').serialize(),
function(response){
if(response == 'success')
$('#formLogin').slideUp('slow', function() {
186
$('#message').html("<p class='success'> 
Sucesso!</p>");
});
else
$('#message').html("<p class='error'>
Usuário e/ou senha inválidos.</p>"); 
}
);
return false;
});
});
login.php
<?php
$username = $_POST['username'];
$password = $_POST['password'];
187
$password = $_POST['password'];
if($username=='jquery' AND $password=='ajax') {
echo 'success';
}
?>
obs.: Para simplificar, não foi usado banco de dados
Combos sincronizados
Banco de Dados - Estrutura
Tabela CONTATO
CREATE TABLE IF NOT EXISTS tb_estado (
sigla char(2) not null PRIMARY KEY,
Banco de Dados
CREATE DATABASE IF NOT EXISTS db_aula;
USE db_aula;
sigla char(2) not null PRIMARY KEY,
nome varchar(40)
);
CREATE TABLE IF NOT EXISTS tb_cidade (
id integer not null auto_increment PRIMARY KEY,
sigla char(2) not null,
nome varchar(60),
FOREIGN KEY(sigla) REFERENCES tb_estado(sigla)
);
189
Banco de Dados - INSERT
Inclusão de dados
INSERT INTO tb_estado(sigla, nome) VALUES
('SP','São Paulo'), ('RJ','Rio de Janeiro'), ('MG','Minas Gerais');
INSERT INTO tb_cidade(sigla, nome) VALUES
('SP','São Paulo'), 
('SP','Lins'),
('SP','Piracicaba'),
('SP','Araçatuba'),('SP','Araçatuba'),
('SP','Birigui'),
('SP','Bilac'),
('SP','Cafelândia'),
('SP','Pongaí'),
('RJ','Rio de Janeiro'),
('RJ','Buzios'),
('RJ','Campos'),
('MG','Belo Horizonte'),
('MG','Poços de Caldas'),
('MG','Uberaba');
COMMIT;
190OBS.: É possível, também, fazer a inclusão diretamente através do PHP
combo.html
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<style> select { width: 150px; }
</head>
<body>
191
<body>
<form>
<select name="estado"></select>
<select name="cidade"></select>
</form>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="combo.js"></script>
</html>
combo.js
$(document).ready(function(){
$.post('estado.php', function(r) {
$('select[name=estado]').html(r);
});
192
$('select[name=estado]').change(function() {
$.post('cidade.php', {'sigla': $(this).val()}, function(r){
$('select[name=cidade]').html(r);
});
});
});
combo.js (com tratamento)
$(document).ready(function(){
$('select[name=estado]').prop('disabled', true);
$('select[name=cidade]').prop('disabled', true);
$.post('estado.php', function(r) {
$('select[name=estado]').html(r);
$('select[name=estado]').prop('disabled', false);
});
193
});
$('select[name=estado]').change(function() {
$('select[name=cidade]').prop('disabled', true);
$.post('cidade.php', { 'sigla': $(this).val() }, function(r){
$('select[name=cidade]').html(r);
$('select[name=cidade]').prop('disabled', false);
});
});
});
estado.php
<?php
$link = mysqli_connect("127.0.0.1", "root", "", "db_aula");
$sql = "SELECT sigla, nome FROM tb_estado";
$rs = mysqli_query($link, $sql);
if(!empty($rs) AND mysqli_num_rows($rs)>0) {
while($r = mysqli_fetch_array($rs)){ 
194
while($r = mysqli_fetch_array($rs)){ 
echo '<option value="'.$r['sigla'].'">'.$r['nome'].'</option>';
}
mysqli_free_result($rs);
}
mysqli_close($link);
?>
cidade.php
<?php
@$sigla = $_POST['sigla'];
$link = mysqli_connect("127.0.0.1", "root", "", "db_aula");
$sql = "SELECT id, nome 
FROM tb_cidade
WHERE sigla = '$sigla'";
$rs = mysqli_query($link, $sql);
195
$rs = mysqli_query($link, $sql);
if(!empty($rs) AND mysqli_num_rows($rs)>0) {
while($r = mysqli_fetch_array($rs)){ 
echo '<option value="'.$r['id'].'">'.$r['nome'].'</option>';
}
mysqli_free_result($rs);
}
mysqli_close($link);
?>
Método $ajax()
� $ajax é o método mais flexível 
oferecido pelo jQuery para 
requisições AJAX.
� Permite tanto GET quanto POST� Permite tanto GET quanto POST
� Parâmetros:
� url, data, async, beforeSend, cache, 
contentType, context, data, dataFilter, 
dataType, error, processData, timeout, 
type, xhr, ...
196
JSON
� Acrônimo de“JavaScript Object Notation“
� Formato leve para intercâmbio de 
dados computacionais.
� JSON é uma alternativa ao XML� JSON é uma alternativa ao XML
� Permite quatro tipos de valores: 
� Inteiros
� Strings
� Boolean
� Array
197
JSON - exemplos
"cliente":[
{"nome": "João", "idade": 25, "sexo": "M"},
{"nome": "José", "idade": 22, "sexo": "M"},
{"nome": "Maria", "idade": 19, "sexo": "F"}
]
198
{
"cliente": [
{"nome": "João", "idade": 25, "sexo": "M"},
{"nome": "José", "idade": 22, "sexo": "M"},
{"nome": "Maria", "idade": 19, "sexo": "F"}
],
"total": 3
}
Os espaços em branco e <enter> são desconsiderados
Enquete Eletrônica
� Objetivo:
� Criar um site no qual os visitantes poderão votar em 
sua preferência e acompanhar o resultado da enquete.
� Requisitos:
� As opções da pesquisa serão inseridas diretamente no 
banco de dados.
� Para cada opção deve-se ter um id, a descrição e o 
número de votos.
� Qualquer visitante poderá votar e, em seguida, ver os 
resultados.
Banco de Dados
Tabela tb_enquete
CREATE TABLE IF NOT EXISTS tb_enquete (
id integer not null auto_increment,
opcao varchar(60),
Banco de Dados db_aula
CREATE DATABASE IF NOT EXISTS db_aula;
USE db_aula;
opcao varchar(60),
votos integer default 0,
PRIMARY KEY(id)
);
Inclusão de dados
INSERT INTO tb_enquete(opcao) VALUES
('SIM, Ajax com jQuery é fantástico!'),
('NÃO, existem outros frameworks melhores.'),
('TALVEZ, ainda não conheço o suficiente.');
COMMIT;
Layout de telas – Enquete
enquete.html
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Enquete com jQuery</title>
<link rel="stylesheet" href="enquete.css" />
</head>
<body>
<div id="content">
<img src="../img/load.gif" id="load" />
<div id="enquete"></div>
</div>
</body>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="enquete.js"></script>
</html>
enquete.css
#content {
position: absolute;
top: 100px;
left: 50%;
width: 450px;
margin-left: -225px;
}
#load {
position: absolute;
display: none;
left: 50%;
top: 50px;
.opcao, .resultado {
width: 96%;
height: 40px;
padding: 5px;
margin-bottom: 5px;
background: #CAE1FF;
border: #6E7B8B 1px solid;
clear: both;
}
.opcao:hover {
cursor: pointer;
top: 50px;
width: 40px;
height: 40px;
margin-left: -20px;
}
#enquete {
display: none;
}
.grafico {
float: left;
background: #4682B4;
height: 16px;
margin-top: 3px;
clear: both;
}
background: #4682B4;
}
.votos {
float: right;
color: #666;
}
.percentual {
float: left;