DHTML Básico - Parte 1

10/01/2006 18:00:00

Autor: Rondinely S. de Almeida

Serviços para Webmasters

Ao contrário do que se pode pensar DHTML não é nenhum padrão para documentos na internet, como é o caso do HTML, CSS ou XML. DHTML é uma técnica de programação de páginas que possibilita alterações dinâmicas da mesma, ou seja, sem a necessidade do navegador recarregar a página, tornando o site mais interativo. Esta possibilidade de alterar dinamicamente a página web é que dá nome a técnica, Dynamic HTML ou, HTML Dinâmico.

A programação em DHTML permite uma maior interação entre o usuário e a página web uma vez que pode-se reagir rapidamente a uma determinada interação.

Vamos o código de nosso exemplo.

mudabg.html

<html>
<head>
<style type="text/css">
<!--
    div#quadro {
        background-color: gray;
        width: 300px;
        height: 100px;
    }
-->
</style>

<script type="text/javascript">
    function mudabg(bg)
    {
        document.getElementById("quadro").style.backgroundColor=bg;
    }
</script>

</head>
<body>
    <b>Movimente o mouse para dentro do quadro cinza para mudar sua cor.</b>
    <div id="quadro" onmouseover="mudabg('red')"
        onmouseout="mudabg('gray')">
    </div>
</body>
</html>

Este documento HTML possui um quadro cinza que muda de cor para vermelho quando o usuário movimenta o mouse sobre ele.

O documento pode ser dividido para fins de estudo em três partes principais, o bloco CSS, o Javascript e o código HTML.

 <div id="quadro" onmouseover="mudabg('red')"
    onmouseout="mudabg('gray')">
</div>

No código HTML criamos uma div cuja identificação, id, é quadro.

Propriedade ID A propriedade ID de um elemento HTML serve como um nome ou identificação para o elemento. Em um documento HTML deve existir um, e somente um elemento com a mesma identificação.

Com a ajuda dos métodos onmouseover, que executa uma função JS toda vez que o cursor do mouse é movimentado para dentro do elemento, e onmouseout, que executa uma função JS toda vez que o cursor do mouse é movimentado para fora do elemento, executamos a função mudabg() e passamos como parâmetro as cores que desejamos para o elemento quadro.

Não deixe de ver também:

Método ONMOUSEOVER O método onmouseover de um elemento HTML armazena uma função JS que é executada toda vez que o evento de mover o cursor do mouse para dentro do elemento acontece.

Método ONMOUSEOUT O método onmouseout de um elemento HTML armazena uma função JS que é executada toda vez que o evento de mover o cursor do mouse para fora do elemento acontece.

<script type="text/javascript">
    function mudabg(bg)
    {
        document.getElementById("quadro").style.backgroundColor=bg;
    }
</script>

Aqui está definida a função mudabg, podemos notar que ela recebe um parâmetro bg que será usado como cor de fundo do elemento quadro.

Para podermos alterar a cor de fundo do elemento quadro precisamos fazer de alguma maneira referência a ele, para isto lançamos mão do método getElementById do objeto document.

Objeto Document O objeto Document representa o documento HTML, ele contém métodos capazes de manipular os outros elementos HTML que formam o documento atual.

Método getElementById O método getElementById do objeto document captura um determinado elemento HTML da página atual pela sua identificação ID.

A propriedade style do elemento quadro possui todas a informação de formatação e apresentação do elemento, uma delas é a propriedade backgroundColor que define a cor de fundo do elemento. Neste exemplo alteramos a cor de fundo do elemento quadro através da função mudabg que é executada toda vez que o cursor do mouse é movido para dentro e para fora da área do elemento.

Agora só falta analisar o código CSS do documento.

<style type="text/css">
<!--
    div#quadro {
        background-color: gray;
        width: 300px;
        height: 100px;
    }
-->
</style>

Para quem já conhece CSS este é um código bem simples. A referência div#quadro indica que estaremos definindo a seguir propriedades para um elemento DIV cuja identificação é quadro. O simbolo # serve para indicar que estamos trabalhando com a propriedade id do elemento DIV, a mesma referência poderia ser feita desta maneira: div[id="quadro"]. Infelizmente esta última sintese mostrada pode não funcionar em determinados navegadores que não possuem suporte adequando a CSS2.

A primeira propriedade que definimos é a cor de fundo do elemento quadro, neste caso background-color: gray, ou seja, a cor cinza será usada no fundo do elemento.

Algo interessante que podemos notar nesta síntese é uma ligeira diferença entre a nomenclatura CSS e Javascript, perceba que a propriedade background-color do código CSS é a mesma propriedade backgroundColor do código Javascript na função mudabg. A regra é a seguinte: toda nomenclatura CSS que possuir hífen quando escrito em Javascript deve ter o hífen retirado e a primeira letra da próxima palavra deve ser escrita em maiúsculo.

As outras duas propriedades simplesmente definem a largura, width: 300px, e a altura, height: 100px, do elemento quadro.

DHTML Básico - Parte 1

10/01/2006 18:00:00

Autor: Rondinely S. de Almeida

Artigos relacionados