DHTML
Desenvolvimento em Web Design II
Profª. Adriana Silva
Conceito DE DHTML
• A implementação DHTML, cobre quatro áreas principais que, na
perspectiva o criador de conteúdo para a Web, lhe oferecem novas
funcionalidades extremamente interessantes. Essas áreas são:
• Estilos Dinâmicos: É possível alterar dinamicamente qualquer
atributo CSS (Cascading Style Sheet) de qualquer texto. Entre esses
atributos incluem- se, por exemplo: cores, visibilidade, fontes, etc.
• Posicionamento Dinâmico: Possibilita o posicionamento de objetos
na página através da manipulação de determinados atributos CSS
(top, right, etc).
•
• Conteúdo Dinâmico: Permite adicionar, eliminar ou modificar
qualquer porção de texto ou gráficos em qualquer posição da página.
• "Data Binding“: É possível apresentar, manipular e atualizar os
dados da página, estabelecendo ligações entre os dados e tags HTML.
Universidade Castelo Branco
Profª. Adriana Silva
O que é necessário para rodar o
DHTML ?
• Como a linguagem está em constante
desenvolvimento, há determinadas funcionalidades
que não apresentam o mesmo comportamento em
todos os navegadores, como também há comandos e
funções que não são reconhecidos em algumas
versões, por serem mais recentes que essas funções.
• Cabe ao programador testar seus scripts em diversos
navegadores, e expor notas de versão, ou então
tratar o código para só executar algo se o navegador
suportar. Uma boa solução no caso de um navegador
não suportar seus scripts, é redirecionar o browser
para uma página sem scripts.
Universidade Castelo Branco
Profª. Adriana Silva
Alguns dos principais Eventos
Para elaborar os scripts, precisamos definir a
lógica dele e, com base nisso, quais eventos serão
utilizados:
• onKeyDown
• onMouseDo
• onMouseOut
• onFocus
• onLoad
• onChange
Universidade Castelo Branco
Profª. Adriana Silva
Div
• Utilizaremos o div style para criar nossos scripts
Sintaxe é
nome_subclasse="nome_atributo: valor;”
Ou
this.style.color = 'red'
Universidade Castelo Branco
Profª. Adriana Silva
Localização da Instrução
• A mudança deve ocorrer quando for disparado o
evento onMouseOver, então basta incluir uma
referencia ao evento na tag <div> e associar à ela
o codigo. A declaração de um evento segue a
mesma sintaxe da declaração de um atributo, ou
seja: nome_evento="codigo_associado".
Universidade Castelo Branco
Profª. Adriana Silva
Declaração
<div style="color: blue;" onMouseOver=
"this.style.color='red';"> Este &eacute; o texto
do Exemplo</div>
Ou
<div align="center" style="color: blue;"
onMouseOver="this.style.color='red';"
onMouseOut="this.style.color='blue'">Este
&eacute; o texto do Exemplo</div>
Universidade Castelo Branco
Profª. Adriana Silva
Outros Exemplos
Código Fonte
Resultado
<div style="text-decoration: none;"
onMouseOver="this.style.textDecoration='underline';"
onMouseOut="this.style.textDecoration='none';">Este
texto vai ficar sublinhado</div>
Este texto vai ficar
sublinhado
<div style="font-weight: normal;"
onMouseOver="this.style.fontWeight='bold';"
onMouseOut="this.style.fontWeight='normal';">Este
texto vai ficar em negrito</div>
Este texto vai ficar em
negrito
<div style="font-size: 14px;"
onMouseOver="this.style.fontSize='10px';"
onMouseOut="this.style.fontSize='14px';">Este texto
vai mudar de tamanho de fonte</div>
Este texto vai mudar
de tamanho de fonte
Universidade Castelo Branco
Profª. Adriana Silva
Outros Exemplos
•O
primeiro
exemplo
utilizou
o
atributo textDecoration, cujos possíveis valores
são:
▫
▫
▫
▫
▫
underline (sublinhado),
overline (sobrescrito),
line-through(tachado),
blink (piscando) e
none (nenhum).
Atribuir o valor none obriga o texto a não ter
decoração nenhuma, se o atributo for deixado em
branco (textDecoration='';) o texto receberá a
decoração definida no objeto pai.
Universidade Castelo Branco
Profª. Adriana Silva
Outros Exemplos
• O Segundo utilizou o atributo fontWeight, cujos
possíveis valores são: bold (negrito), bolder (negrito
forte), lighter (negrito fraco) e normal. Alem desses
valores, também é possível definir um valor numérico, e
quanto mais baixo esse valor, mais clara é a fonte.
• O terceiro exemplo utilizou o atributo fontSize, que
define o tamanho da fonte, em pixels (px) ou pontos (pt).
Note que na declaração do objeto <div> não foi atribuído
valor algum, isso faz com que se utilize o valor definido
para a mesma propriedade no objeto pai (no caso a
célula da tabela). Nesse caso, para restaurar o tamanho
foi deixado em branco o valor, assim é atribuído o valor
do mesmo atributo do objeto pai.
Universidade Castelo Branco
Profª. Adriana Silva
Outros Exemplos
• <div align="center" style="backGround-Color:
#E1E9F7; border: 1px solid #CCCCCC; color:
blue;"
onMouseOver="this.style.backgroundColor='#E
9F7E1';this.style.color='green';"
onMouseOut="this.style.backgroundColor='#E1
E9F7';this.style.color='blue';">Neste exemplo,
mudam a cor do texto e a cor de fundo</div>
Universidade Castelo Branco
Profª. Adriana Silva
Atividade da Aula
• Crie uma páginas simples, com menus
superiores, utilizando recursos de DHTML.
• Acesse a página abaixo e tente instalar e executar
ao menos 2 scripts em seu site:
http://www.scriptbrasil.com.br/codigos/dhtml/
Universidade Castelo Branco
Profª. Adriana Silva