Introdução ao DHTML

Introdução ao DHTML - Parte III

Em nossos artigos anteriores (Parte I e Parte II) vimos como mudar dinamicamente a formatação de um bloco de texto e de uma célula de tabela, e vimos também como navegar para uma outra página usando o Javascript, sem links. Agora vamos ver como ocultar e mostrar trechos de uma página HTML.

Os Objetos <div> e <span>

O objeto div já foi usado nos artigos anteriores. No primeiro artigo usei ele para definir um objeto de área para conter o texto, e interceptar os eventos de mouse sobre esse texto. No segundo artigo usei ele para formatar o texto, concentrando todas as caracteristicas da formatação em uma única tag. Estas são sem duvida as principais utilidades destes dois objetos: definir objetos de área sobre o HTML e definir blocos de texto.

Objetos de Áreas: São objetos que delimitam um espaço no HTML, e atribuem a esse espaço um nome, o que permite tratarmos toda essa area via Javascript. Para definir objetos de área, geralmente usamos a tag <div>, embora a tag <span> nesse aspecto tem comportamento identico.

Blocos de Texto: São objetos que delimitam um trexo de texto, ou uma sequencia de objetos <p>. Os blocos de texto tem por finalidade, como as áreas, definirem um nome para o bloco e permitir que este seja tratado via Javascript. Aqui encontramos as primeiras diferenças entre <div> e <span>. Veja os códigos abaixo e seus respectivos resultados:

<p>Este é um exemplo do uso do div. <div style="font-weight: bold;">Este texto está dentro do div.</div> Já este está fora.</p>

Este é um exemplo do uso do div.

Este texto está dentro do div.

Já este está fora.

<p>Este texto é um exemplo de uso do span.
<span style="font-weight: bold;">Este texto está dentro do span.</span>
Já este está fora.</p>

Este texto é um exemplo de uso do span. Este texto está dentro do span. Já este está fora.

Como pode-se ver, o <div> provocou uma quebra de linha antes do inicio do bloco, e outra após o bloco. Não tenho certeza se isso acontece em todos os navegadores, mas como sei que ocorre no IE, vale a pena não usar jamais o <div> para definir um bloco de texto dentro de um paragrafo. Já o <span> não provocou a quebra de linha. Veja que ele se adequa a blocos de texto dentro de paragrafos.

Eu costumo usar o <div> para agrupar objetos (áreas) e o <span> para trechos de texto dentro de um objeto.

Bem, mas vamos mostrar as funcionalidade desses objetos. Primeiro, vamos comparar o código necessário para formatar um texto usando as tags clássicas do HTML e usando o <div> (ou <span>):

<p align="center"> <font color="#990000"> <strong> <em> <u>este texto está em negrito, itálico e sublinhado, alinhado ao centro e em vermelho.</u> </em> </strong> </font> </p>	*este texto está em negrito, itálico e sublinhado, alinhado ao centro e em vermelho.*
<div align="center" style="color: #990000; font-weight: bold; font-style: italic; text-decoration: underline;">este texto também está em negrito, itálico e sublinhado, alinhado ao centro e em vermelho, mas usa apenas uma tag para definir tudo isso.</div>	este texto também está em negrito, itálico e sublinhado, alinhado ao centro e em vermelho, mas usa apenas uma tag para definir tudo isso.

Pode parecer mais complicado usar o <div> que as tags classicas, e realmente pode ser para quem não conhece os atributos da subclasse style, mas o código se torna mais limpo, pois tem menos tags abertas, fica menos sussetivel ao erro de fechar tags em local errado e ainda permite definir algumas formatações especiais que não tem tags correspondentes em HTML.

Mas acima de tudo, a maior vantagem do uso do <div> para formatar o texto é o fato de a formatação poder ser acessada via Javascript, como ja vimos nos artigos anteriores. Embora seja possível alterar a formatação em ambos os exemplos acima, o codigo do primeiro é muito mais complexo que o do segundo.

Como Ocultar / Mostrar um Objeto

Vamos criar uma espécie de dicionário on-line para o Hino Nacional Brasileiro. A idéia é exibir a letra do hino, criando links nas palavras pouco conhecidas, e exibindo o significado da palavra quando o usuário clicar nela, e ocultando se clicar novamente. Aqui vamos usar apenas a primeira estrofe: vamos digita-la:

<html>
<body>
<strong>
  <p style="color: #0000FF;">Ouviram do Ipiranga as margens plácidas<br>
  De um povo o heróico brado retumbante<br>
  E o sol da liberdade em raios fúlgidos<br>
  Brilhou no céu da pátria nesse instante.</p>
</strong>
</body>

O Hino deve ficar como abaixo:

Ouviram do Ipiranga as margens plácidas
De um povo o heróico brado retumbante
E o sol da liberdade em raios fúlgidos
Brilhou no céu da pátria nesse instante.

Bastante simples. Agora vamos definir o dicionário. Vou usar as definições de um dicionário que tenho agora em mãos. Eis nossos verbetes e seus significados:

plácidas	mansas, calmas, serenas
brado	grito muito forte
retumbante	que ressoa, que tem eco
fúlgidos	que brilham

Se tivessemos continuado a letra do hino, haveria mas de trinta palavras nessa lista...

Vamos incluir os significados a frente de cada palavra, entre parenteses, delimitando o sigficado pela tag <span>, e dando como nome a cada <span> a palavra a que se refere (sem acentos). Para dar nome a um objeto <span>, basta atribui-lo como valor à propriedade id. Lembrando que javascript é casesensitive, é bom usar apenas letras minusculas para nomear um objeto, pois reduz as chances de erro no script.

Vamos também destacar os significados com a cor verde. O objeto <span> não possue a propriedade color, então vamos usar a subclasse style, como ja vimos. Veja abaixo o código e em seguida seu resultado:

<strong>
  <p style="color: #0000FF;">Ouviram do Ipiranga as margens plácidas <span id="placidas" style="color: #339933;">(mansas, calmas, serenas)</span><br>
  De um povo o heróico brado <span id="brado" style="color: #339933;">(grito muito forte)</span> retumbante <span id="retumbante" style="color: #339933;">(que ressoa, que tem eco)</span><br>
  E o sol da liberdade em raios fúlgidos <span id="fulgidos" style="color: #339933;">(que brilham)</span><br>
  Brilhou no céu da pátria nesse instante.</p>
</strong>

Ouviram do Ipiranga as margens plácidas (mansas, calmas, serenas)
De um povo o heróico brado (grito muito forte) retumbante (que ressoa, que tem eco)
E o sol da liberdade em raios fúlgidos (que brilham)
Brilhou no céu da pátria nesse instante.

Agora vamos ocultar os significados das palavras. Existe um atributo chamado display na subclasse style, que quando definido para none, torna o objeto invisível. Vamos definir em cada <span> do exemplo o atributo style.display como none. O Código deve ficar assim: style="color: #339933; display: none;"

Nosso exemplo volta a exibir apenas o hino, mas agora os significados estão ocultos no meio do texto: (se você usa o Dreamweaver, vai ter que salvar a pagina e exibir no navegador para que o texto fique oculto)

Nos artigos anteriores tratamos os eventos onMouseOver, onMouseOut, onMouseDown e onMouseUp. Agora vamos conhecer o quinto evento de Mouse: onClick. O evento onClick é disparado quando um objeto detecta o pressionar do botão principal do mouse sobre ele. Ele é disparado entre os eventos onMouseDown e onMouseOut, mas não é aconselhavel sua utilização em conjunto com esses dois.

Vamos criar um link nas palavras que tem significado oculto no texto, para que no clique nesse link, o texto apareça, e clicando novamente, ele seja ocultado novamente. Vamos definir os links, atribuindo a href o valor "javascript:;", pois isso cria um link nulo, que não aponta para lugar nenhum, mas define a area clicável. Assim, a palavra plácidas deve ficar como abaixo:

<a href="javascript">plácidas</a>

O mesmo deve ser feito com as palavras brado, retumbante e fúlgidos.

Vamos então definir no evento onClick do link o código necessário para tornar visível o texto.

Para tornar visível um objeto, basta limpar o valor da propriedade style.display, ou seja, atribuir a ela um valor em branco. Assim, o código deve ficar assim: objeto.style.display='';

Vamos então criar a instrução para cada link, lembrando que o objeto em cada instrução será a id do <span> correspondente ao link.

Abaixo como ficou o link para a primeira palavra (plácidas):

<a href="javascript" onClick="placidas.style.display='';">plácidas</a>

Repetindo o mesmo procedimento para os demais links, temos o seguinte resultado (tente clicar os links):

Nota: Se você exibir o código fonte deste artigo, verá que os codigos dos exemplos que estou exibindo não coincide exatamente com o que está escrito. Isso porque não posso ter na mesma página varios <span> com o mesmo nome, e os nomes se repetem a cada exemplo.

Instrução Condicional (if) em JavaScript

Se você tentou clicar no exemplo para o texto sumir depois de ter aparecido, viu que isso não ocorre. Você deve ter percebido que o código que incluimos no evento onClick de cada link faz o texto aparecer e pronto. Se clicar de novo, vai mandar aparecer de novo, mesmo que já esteja sendo exibido. Mas como resolver isso? Veja as instruções abaixo:

objeto.style.display=''; faz com que o objeto fique visível.

objeto.style.display='none'; faz com que o objeto fique invisível.

Assim, basta que na segunda vez que o link for clicado, seja executada a segunda instrução. Mas como? Simples: vamos criar um if (comando condicional) que vai verificar se o objeto está visível ou não. Se estiver invisível, então executa a primeira instrução, senão executa a segunda. Abaixo está a sintaxe do if em javascritp:

if(condição){instrução se verdadeiro}[else{instrução se falso}];

Em azul estão os elementos de sintaxe. O trecho entre colchetes [ ] é opcional. Vamos estudar essa sintaxe mais profundamente quando falarmos sobre javascript. Por enquanto vamos ficar com essa sintaxe básica de if.

A condição será verificar se o objeto está invisível ou não. O operador de igualdade em javascript é == (dois iguais seguidos). Vamos verificar se o valor de style.display é igual a none. A instrução fica assim: objeto.style.display == none

A instrução se verdadeiro será a primeira das duas acima, que torna o bojeto visível. A instrução se falso será a segunda, que torna o objeto invisível. Assim, se ele estiver invisível é mostrado, senão é ocultado. A instrução final fica assim:

if(objeto.style.display==none){objeto.style.display=''}else{objeto.style.display='none'};

Colocando a instrução acima no evento onClick de cada link em nosso exemplo, substituindo objeto pela id do <span> ao qual se refere cada link, temos o seguinte resultado:

No if também é possível encadear mais de uma instrução dentro dos {}, bem como também é possível encadear um if a outras instruções, ou introduzir um if dentro de outro. Respeitando-se a sintaxe básica, pode-se fazer qualquer tipo de experiência de encadeamento de instruções em Javascript, lembrando-se de separar as instruções em mesmo nível por ponto-e-virgula.

Este exemplo foi baseado no mode de exebição dos significados de termos desconhecidos no HTMLHelp da microsoft (help da maioria dos softwares hoje no mercado). A sintaxe do javascript é a mesma, e o efeito visual muito parecido. Mesmo assim, esse exemplo pode ser usado na Web para exibir/ocultar qualquer tipo de objeto.

Não somente blocos de texto, mas qualquer conjunto de objetos delimitados por <span>...</span> ou <div>...</div> pode ser exibido/ocultado usando o mesmo método. Vale a pena fazer os testes...

Assim terminamos nossa pequena introdução sobre o que é DHTML. Com exemplos práticos, podemos conhecer as principais funcionalidades do DHTML, como alterar a formatação de um trecho de texto dinamicamente, alterar a formatação de um objeto (como foi feito com a célula no segundo artigo, pode-se fazer com as propriedades de qualquer objeto), e aqui vimos como dar nome a objetos html e como alterar suas propriedades atravez de eventos disparados em outros objetos.

Alem disso, vimos três comportamentos básicos que já são o suficiente para dar aparencia profissional a qualquer website, que não poderiam ser obtidos sem o uso de scripts. Alterar a formtação do texto, alterar a formatação de objetos e ocultar/mostrar objetos são recursos muito utilizados como partes de comportamentos mais complexos, que vamos ver mais pra frente. Por enquanto, vamos parar um pouco com Javascritp e vamos ter uma instrodução sobre o que é CSS e como usar...

Até a próxima

Elieser Carlos Topassi
Web Master - elieser_topassi@yahoo.com.br

São José do Rio Preto, SP