O que é DHTML?

sexta-feira, 12 de outubro de 2007

Esta é uma breve introdução sobre DHTML, uma das mais poderosas ferramentas nas mãos de um Web Master. Este artigo 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, a 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 JavaScript no que se refere à 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, a 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 à 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:

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 (código acima):

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.

<div
  style="text-decoration: none"
  onMouseOver="this.style.textDecoration='underline';"
  onMouseOut="this.style.textDecoration='none';"
>
	Este texto vai ficar sublinhado
</div>

<div
  style="font-weight: normal"
  onMouseOver="this.style.fontWeight='bold';"
  onMouseOut="this.style.fontWeight='normal';"
>
	Este texto vai ficar em negrito
</div>

<div
  style="font-size: 14px"
  onMouseOver="this.style.fontSize='10px';"
  onMouseOut="this.style.fontSize='14px';"
>
	Este texto vai mudar de tamanho de fonte
</div>

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>