manipulando e css j sprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando...
TRANSCRIPT
![Page 1: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/1.jpg)
PROGRAMAÇÃO PARA INTERNET RICA
Prof. Dr. Daniel Caetano
2012 - 1
MANIPULANDO XHTML E CSS COM JAVASCRIPT
![Page 2: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/2.jpg)
Objetivos
• Apresentar a manipulação direta de elementos do XHTML e CSS com o uso do JavaScript
• Apresentar e eliminar elementos (PopUp, por exemplo)
• Mudar funcionalidade de elementos
• TRABALHO A ONLINE!
![Page 3: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/3.jpg)
Material de Estudo
Material Acesso ao Material
Notas de Aula http://www.caetano.eng.br/aulas/pir/ (Aula 7)
Apresentação http://www.caetano.eng.br/aulas/pir/ (Aula 7)
Material Didático Aprenda a Criar Páginas Web c/ HTML, páginas 609 a 648
Google +“JavaScript” +tutorial +DHTML
Web Sites http://www.w3.org/
![Page 4: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/4.jpg)
CODIFICAÇÃO “CLIENT-SIDE”
![Page 5: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/5.jpg)
Codificação Client-Side
• Por que codificar no lado do cliente?
• Respostas rápidas
• Sensação de interação em tempo real
• Diminuir consumo de banda
• Diminuir processamento no servidor
• Manipular dados do XHTML
– document.getElementById(“id”)
![Page 6: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/6.jpg)
COMO “SUMIR” COM ELEMENTOS DA PÁGINA
![Page 7: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/7.jpg)
Sumindo com Elementos
• Sumir = não desenhar
• Prático:
– Deixar tudo pronto
– Mostrar só quando necessário
• Duas formas de fazer o “sumiço”
A. Elemento continua ocupando seu espaço
B. Elemento some completamente
![Page 8: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/8.jpg)
Sumindo com Elementos
• Elemento ocupa espaço mas não é desenhado
• Propriedade: visibility
• visibility: visible;
– Mostra elemento
Em Cima
Em Baixo
visibility: visible
![Page 9: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/9.jpg)
visibility: visible
Sumindo com Elementos
• Elemento ocupa espaço mas não é desenhado
• Propriedade: visibility
• visibility: visible;
– Mostra elemento
• visibility: hidden;
– Esconde elemento
Em Cima
Em Baixo
visibility: hidden;
![Page 10: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/10.jpg)
Sumindo com Elementos
• Elemento nem ocupa espaço nem é desenhado
• Propriedade: display
• display: block;
– Mostra elemento
Em Cima
Em Baixo
display: block
![Page 11: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/11.jpg)
display: block
• Elemento nem ocupa espaço nem é desenhado
• Propriedade: display
• display: block;
– Mostra elemento
• display: none;
– Esconde elemento
Sumindo com Elementos
Em Cima
Em Baixo
Em Baixo
![Page 12: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/12.jpg)
TUTORIAL POPUP
![Page 13: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/13.jpg)
Um PopUp em JavaScript+CSS
![Page 14: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/14.jpg)
Um PopUp em JavaScript+CSS
![Page 15: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/15.jpg)
Um PopUp em JavaScript+CSS
![Page 16: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/16.jpg)
ASSOCIANDO FUNCIONALIDADES A OUTROS ELEMENTOS
![Page 17: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/17.jpg)
Funcionalidades em Elementos
• Quando associamos funções direto no HTML
– Só podemos associar ações a links e botões...
• No JavaScript, entretanto, não há limitação!
• Podemos associar ações a um div, por exemplo!
A. Fechar o PopUp quando clicarmos duas vezes no mesmo;
B. Fechar o PopUp quando passarmos o mouse por cima do mesmo.
![Page 18: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/18.jpg)
TROCANDO A FUNCIONALIDADE DE ELEMENTOS DA PÁGINA
![Page 19: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/19.jpg)
Trocar a Funcionalidade
• Na função init()...
– Associamos uma função ao botão “mostra”
• É possível mudar a função associada!
• Basta indicar um novo nome
botao.onclick = funcao1;
(...)
botao.onclick = funcao2;
![Page 20: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/20.jpg)
Trocar a Funcionalidade
botao.onclick = funcao1;
botao.onclick()
function funcao1() { // ... }
function funcao2() { // ... }
![Page 21: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/21.jpg)
Trocar a Funcionalidade
botao.onclick = funcao1;
botao.onclick = funcao2;
botao.onclick()
function funcao1() { // ... }
function funcao2() { // ... }
![Page 22: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/22.jpg)
Trocar a Funcionalidade
• Exemplo:
botao.onclick()
function funcao1() { mostraPopUp(); botao.onlick = funcao2; }
function funcao2() { escondePopUp(); botao.onlick = funcao1; }
![Page 23: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/23.jpg)
Trocar a Funcionalidade
• Exemplo:
botao.onclick()
function funcao1() { mostraPopUp(); botao.onlick = funcao2; }
function funcao2() { escondePopUp(); botao.onlick = funcao1; }
![Page 24: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/24.jpg)
Trocar a Funcionalidade
• Exemplo:
botao.onclick()
function funcao1() { mostraPopUp(); botao.onlick = funcao2; }
function funcao2() { escondePopUp(); botao.onlick = funcao1; }
![Page 25: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/25.jpg)
Trocar a Funcionalidade
• Exemplo:
botao.onclick()
function funcao1() { mostraPopUp(); botao.onlick = funcao2; }
function funcao2() { escondePopUp(); botao.onlick = funcao1; }
![Page 26: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/26.jpg)
Trocar a Funcionalidade
• Exemplo:
botao.onclick()
function funcao1() { mostraPopUp(); botao.onlick = funcao2; }
function funcao2() { escondePopUp(); botao.onlick = funcao1; }
E assim por diante...
![Page 27: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/27.jpg)
Trocar a Funcionalidade
• Vamos testar?
A. Modifique o botão que abre o PopUp para que, após abri-lo, sirva também para fechá-lo;
B. Incremente o código para que, quando a função do botão mudar, mude também seu texto.
![Page 28: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/28.jpg)
FUNÇÕES COM PARÂMETROS
![Page 29: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/29.jpg)
Parâmetros em Funções
• As funções JS pode receber parâmetros
• Basta indicar na declaração
function mudaCor(novaCor) {
document.body.style.color = novaCor;
}
![Page 30: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/30.jpg)
Parâmetros em Funções
• As funções JS pode receber parâmetros
• Basta indicar na declaração
function mudaCor(novaCor) {
document.body.style.color = novaCor;
}
• Chamando...
mudaCor(“green”);
• Qual a nova cor do texto?
![Page 31: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/31.jpg)
VÁRIOS EVENTOS, UMA ÚNICA FUNÇÃO
![Page 32: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/32.jpg)
Função para Múltiplos Eventos
• Uma mesma função JS pode ser associada a vários eventos e elementos...
function mudaCor() {
document.body.style.color=“green”;
}
button1.onclick = mudaCor;
div1.onclick = mudaCor;
td1.onclick = mudaCor;
![Page 33: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/33.jpg)
Função para Múltiplos Eventos
• Mas essa função muda sempre o texto global!
function mudaCor() {
document.body.style.color = “green”;
}
• E se quisermos mudar apenas a cor do texto do elemento clicado?
• Dois jeitos: o “força bruta” e o “sei o que faço”
• Força Bruta: cópia para cada elemento
![Page 34: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/34.jpg)
Função para Múltiplos Eventos
• Jeito “inteligente”:
function mudaCor() {
this.style.color = “green”;
}
• this?
• this: referencia ao objeto “atual” (clicado)
• Muito útil para economizar funções!
![Page 35: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/35.jpg)
TUTORIAL: VALIDAÇÃO DE FORMULÁRIO
![Page 36: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/36.jpg)
Validação com JavaScript + CSS
![Page 37: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/37.jpg)
Validação com JavaScript + CSS
![Page 38: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/38.jpg)
Validação com JavaScript + CSS • Não esqueçamos de: A. Marcar o campo ativo com “:focus” B. Marcar o campo “problemático” com borda
vermelha C. Ativar o foco no campo com problema com
“.focus()” D. Selecionar texto do campo com problema com
“.select()” E. Desligar o campo de envio e mudar o texto para
“Enviando...” F. Opcional: contador de caracteres no campo
TextArea com o evento .onkeyup
![Page 39: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/39.jpg)
TUTORIAL: ADICIONANDO JAVASCRIPT NO JOGO DA VELHA
![Page 40: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/40.jpg)
Jogo da Velha • Não esqueçamos de: A. Sumir com fundo cinza das áreas de jogo B. Tornar “invisível” elemento de seleção C. Criar classes para diferentes marcações D. Criar função pintaTabuleiro()
A. Pintar tabuleiro segundo texto B. Ligar visibilidade da seleção apenas em campos
vazios
E. Implementar função click (muda fundo) A. Habilitar click apenas em campos vazios
F. mostraJanela com diferentes status de jogo G. Chamar pintaTabuleiro no início do jogo
![Page 41: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/41.jpg)
CONCLUSÕES
![Page 42: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/42.jpg)
Resumo • O JavaScript é uma ferramenta muito útil que
possibilita processamentos simples no lado do cliente
• O uso de JavaScript modificando elementos do CSS torna a sensação de usar as páginas mais dinâmica, evitando os tempos de espera da rede
• Aplicações para Internet Rica sempre irão contar com código no lado do cliente para este fim!
• TAREFA
– Trabalho A!
![Page 43: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/43.jpg)
Próxima Aula
• JavaScript e CSS só fazem essas coisas?
– Sim e não!
–DHTML!
–Não vai ficar <div> sobre <div>!
![Page 44: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/44.jpg)
PERGUNTAS?
![Page 45: MANIPULANDO E CSS J SprogramaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1 manipulando xhtml e css com javascript](https://reader033.vdocuments.site/reader033/viewer/2022052802/5f1c174980d2d71ad2198ba6/html5/thumbnails/45.jpg)
BOM DESCANSO A TODOS!