Aula 06 - DHTML

Prévia do material em texto

PROGRAMAÇÃO PARA INTERNET RICA
Aula 6 - DHTML
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Conteúdo Programático desta aula
O DHTML ontem e hoje;
As partes que fazem um todo poderoso;
Andando por dentro das páginas;
Formatando as páginas dinamicamente;
Animando um pouco;
Falando sobre as dificuldades.
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
O DHTML ontem e hoje
O grande uso do DHTML no passado ficou por conta dos efeitos.
Hoje ele vem aumentar as possibilidades da interface, trazendo funcionalidades que só eram encontradas em sistemas desktop.
http://www.fromdesigner.com
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
As partes que fazem um todo poderoso
 O DOM define a estrutura da página XHTML
 CSS e o poder da formatação
 Javascript, não só o Javascript
 XHTML é base para os outros
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Andando por dentro das páginas
O Javascript possui métodos para andar pela estrutura do objeto do documento XHTML.
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Código para andar pela estrutura
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Recuperando o valor de um campo de formulário
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Recuperando o valor de um campo do tipo radio
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Manuseando elementos em uma página 
A interação poderá gerar a necessidade de que o código acrescente marcações na estrutura do documento ou altere alguma informação.
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Manuseando um pouco
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Mexendo com o Dom
hasAttribute("atributo") - Verfica se o elemento possui o atributo.
setAttribute("atributo","valor") - Atribui um valor ao atributo. 
getAttribute("atributo") - Obtém o valor do atributo.
removeAttribute("atributo") - Remove o atributo.
appendChild(objeto) - Adiciona um elemento como filho do atual.
createElement("elemento") - Cria um elemento.
createTextNode("conteúdo") - Cria um texto para por em um elemento
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Mexendo com o Dom
parentNode - Retorna o elemento pai do nó (elemento) atual.
childNodes - Retorna a coleção de filhos do elemento.
firstChild - Retorna o primeiro nó interno ao elemento.
lastChild - Retorna o último nó interno ao elemento.
nextSibling - Retorna o próximo nó filho do mesmo pai que o nó atual.
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Formatando as páginas dinamicamente
Controlando o CSS com o Javascript.
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Configurando o CSS
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Iniciando com Animação
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Lembrando
Usamos o CSS para gerar os efeitos dinâmicos no XHTML, por isso que muito que será programado terá início no propriedade "style" do objeto recuperado com getElementById.
A propriedade "style" também é um objeto que possui propriedades, usamos:
 top, left 
 visibility
 position
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Mais um menu
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
Problemas que podemos encontrar
Navegador
Internet Explorer
Firefox
Outros
Portátil
Tema da Apresentação
DHTML – AULA 6
PROGRAMAÇÃO PARA INTERNET RICA
*
jQuery
Algumas vantagens:
Tema da Apresentação