|
25.08.2007
Este é o primeiro de uma série de
artigos sobre DHTML, uma das mais poderosas ferramentas nas mãos de um
Web Master. Esses artigos darão uma visão geral de o que é e como usar
o DHTML. Não vou me ater muito em teorias, pois a linguagem JavaScript
(padrão para DHTML) é muito complexa, em vez disso, vou dar exemplos de
utilidade pratica para os conceitos apresentados, e mostrar como
utilizar essa tecnologia para criar soluções criativas, bem
apresntaveis e funcionais para a criação de paginas web dinamicas.
O que é DHTML ?
Ao contrario do que se pensa, DHTML
não é uma linguagem de programação, mas sim um conjunto de técnicas de
programação que combinam as linguagens HTML e JavaScript para tornar o
HTML dinamico. Daí o nome DHTML - Dynamic Hyper Text Markup Language.
Nos anos 80, com o advento dos
computadores pessoais, surgiu uma linguagem de programação que permitia
transportar arquivos gráficos no formato texto, e depois eles seriam
remontados como graficos para ser exibidos. É a chamada HTML. Com os
avanços tecnologicos na area da Internet, logo foi possivel enviar
esses arquivos HTML pela rede, e assim surgiram as Paginas Web. Mas
nesse momento o HTML perdia muito em performance, pois era necessário
enviar a pagina pela internet, para que ela fosse visualizada no
navegador cliente.
A grande desvantagem do HTML sempre
foi o fato de ser totalmente estática, ou seja, depois de interpretado
o codigo e montada a pagina grafica, nada poderia acontecer. A primeira
mudança nesse aspecto não veio na linguagem, mas sim nos navegadores. A
partir da segunda geração de navegadores, os Links passaram a ser
sublinhados, tendo comportamento diferente do restante do texto. Mas
isso não estava ao alcance do programador, e sim pre-programado no
interpretador da linguagem.
Os links ativos foram o pontapé
inicial para uma grande revolução: se era possível trocar a formatação
do link em milesimos de segundos no browser, porque não fazer o mesmo
com o resto do texto??? Assim surguia os primeiros esboços da linguagem
JavaScript, criada pela Netscape e lançada na versão 2.0 do seu
navegador. Anos depois, em um acordo entre a Microsoft e a Netscape,
foi criada uma convenção internacional que homologou a linguagem
JavaScript. Os navegadores Internet Explorer e Netscape, à partir das
versões 3.0, passaram a ter suporte à essa linguagem, e assim as
paginas HTML ganharam vida nas telas do browsers.
O conceito DHTML surguiu em meados dos
anos 90 com o Netscape 3.0, que trazia o reconhecimento de eventos, o
que tornava o HTML interativo com o usuário. A Microsoft não ficou pra
traz e lançou a versão 3.0 do IE, que tambem trazia a interpretação de
eventos, e ainda adicionava um novo conceito ao DHTML, chamado CSS - Cascating StyleSheet
que permitia armazenar em um trecho de script separado do HTML as
regras de formatação e que passou a ser usado para configurar a
atividade do JavaScritp no que se refere a mudança dinamica de
formatação.
O que é necessário para rodar o DHTML ?
O Javascript, por necessitar de um interpretador, inpõe algumas restrições ao uso do DHTML:
- O navegador Internet Explorer até sua versão 2.0 não reconhece JavaScript;
- O
navegador Netscape na versão 2.0 não reconhece eventos, mas permite
efeitos de linha de tempo (entre outros usos do JavaScript sem relação
com DHTML);
- O navegador Netscape à partir da vesão 3.0 reconhece JavaScript 1.0
- Os demais navegadores reconhecem JavaScript, mas podem apresentar comportamento distinto do obtido no IE e no Netscape
Como a linguagem está em constante
desenvolvimento, há determinadas funcionalidades que não apresentam o
mesmo comportamento em todos os navegadores, como tambem 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 codigo para só executar algo se o navegador suportar. Uma boa
soluçõa no caso de um navegador não suportar seus scripts, é
redirecionar o browser para uma página sem scripts.
Alem do JavaScript, o CSS também apresenta problemas de não reconhecimento no Nestcape e no IE em versões inferiores à 3.0.
O que é possível fazer com DHTML ?
Observe abaixo alguns exemplos do que é possível fazer com a combinação HTML - JavaScript:
Estes são apenas exemplos de
comportamentos simples que podem ser feitos com JavaScript. Todo o
script que realiza os efeitos acima está escrito em apenas 16 linhas.
Mas por enquanto não vamos analizá-los. Vamos nos ater a um exemplo
prático para se iniciar com DHTML.
Mudando a formatação do texto
No primeiro quadro acima, temos um
exemplo onde passando o mouse sobre a célula da tabela, o texto contido
na tabela muda de cor. Vamos por a mão na massa e fazer um script
semelhante. Mas antes de iniciar, um pouco de teoria sobre HTML:
Em HTML, cada tag dá origem a um
objeto, que pode ser acessado pelo script da pagina. Um objeto HTML
nada mais é que uma area da pagina que pode reconhecer eventos sobre si
mesma, bem como apresentar atributos proprios, ou conter outros objetos.
Como eu disse, cada tag define um
objeto. Mas o texto solto na página não pertence à objeto algum, então
não tem como acessá-lo no script. A solução é criar um objeto que
comporte o texto. É o que vamos fazer. Vamos utilizar o objeto div,
ele define uma area do html, que pode ser formatada diferentemente do
restante da pagina, e permite também reconhecer eventos sobre essa
area. Poderiamos usar qualquer tag HTML, como a tag <td> que foi
usada no exemplo acima, ou uma tag <p>, que define um paragrafo
de texto.
Agora é preciso definir a logica de
funcionamento do script: o que ele deve fazer com o texto do objeto
div? Resposta: deve mudar a cor do texto toda vez que o mouse passar
por cima do objeto, e restaurar a cor anterior quando o mouse sair de
cima da area do objeto. Para tanto vamos precisar interceptar dois
eventos do Mouse (em um proximo artigo, trarei uma lista completa dos
eventos). Nossos eventos são onMouseOver (quando o mouse passar por cima) e onMouseOut (quando o mouse deixar de estar por cima).
O objeto div não possue um atributo que defina a cor do texto. Assim devemos utilizar atributos da subclasse style (que é comum a todos os objetos HTML). O atributo de style que define a cor do texto é color. Assim, é possível definir a cor do texto de um div atraves do atributo style.color. Veja como:
<div style="color: blue;">
A sintaxe é
nome_subclasse="nome_atributo: valor;"
Assim, definimos a cor do texto para
azul. Mas como mudar para vermelho quando o mouse passar por cima?
Simples: com uma instrução que mude o valor de style.color para "red".
Em javascript podemos sempre referenciar o objeto no qual é disparado o
evento pela palavra-chave this. Assim, a instrução para mudar a cor do texto será:
this.style.color = 'red'.
Mas onde por essa instrução??? aí
entram os eventos citados acima. 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".
Vamos a declaração do objeto:
<div style="color: blue;" onMouseOver="this.style.color='red';">Este é o texto do Exemplo</div>
Abaixo temos o resultado da linha de codigo acima:
Este é o texto do Exemplo
Você deve ter percebido que passando o
mouse por cima, o texto fica vermelho. Mas por que não volta ao
normal??? simples: o codigo associado ao evento onMouseOver é executado
quando o mouse é detectado sobre o objeto, mas não tem relação alguma
com o fato de o mouse estar sobre o objeto, ou seja, seu efeito
permanece mesmo quando o mouse se retira de cima do objeto. Para
contornar esse problema, vamos programar uma nova mudança de cor para
quando o mouse se retirar de cima do objeto, ou seja, no evento
onMouseOut. A instrução será a mesma do evento onMouseOver, mas
atribuindo a cor azul para o texto. Vejamos como fica agora a
declaração do objeto (lembrando que em html as quebras de linha não
interferem):
<div align="center"
style="color: blue;" onMouseOver="this.style.color='red';"
onMouseOut="this.style.color='blue'">Este é o texto do
Exemplo</div>
Abaixo temos agora o exemplo completo (codigo acima):
Este é o texto do Exemplo
Abaixo, deixo uma tabela com alguns
outros exemplos de comportamento semelhantes a esse. Observe as linhas
de código dando especial atenção aos atributos da subclasse style.
|
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
|
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.
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 atribuido valor
algum, isso faz com que se utilize o valor definido para a mesma
propriedade no objeto pai (no caso a celula 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.
Só para encerrar o assunto, vou deixar
um exemplo onde vários desses atributos são alterados ao mesmo tempo.
Em Javascript, podemos encadear uma série de instruções em uma única
linha de comando, bastando separar as instruções por sinais de
ponto-e-virgula (;). Abaixo está o código e logo após o exemplo:
<div align="center"
style="backGround-Color: #E1E9F7; border: 1px solid #CCCCCC; color:
blue;"
onMouseOver="this.style.backgroundColor='#E9F7E1';this.style.color='green';"
onMouseOut="this.style.backgroundColor='#E1E9F7';this.style.color='blue';">Neste
exemplo, mudam a cor do texto e a cor de fundo</div>
Neste exemplo, mudam a cor do texto e a cor de fundo
|
Indique 
Número de visitas deste fev/2005