Curso iMasters - Web Sites com Ajax - Capítulo 2

JavaScript

Introdução ao DHTML

Como dito no prefácio deste capítulo, DHTML é uma combinação de tecnologias - XHTML, CSS, JavaScript - utilizadas em conjunto para criar web sites dinâmicos.

O termo DHTML é uma estratégia de marketing de duas empresas - Netscape e Microsoft - que tinham o objetivo de descreverem a nova tecnologia suportada pela quarta geração (4.x) de seus browsers, Netscape Navigator e Internet Explorer, respectivamente.

É preciso ressaltar que essa tecnologia não é um padrão do W3C. Assim, como não temos a intenção que nossos scripts funcionem apenas nos browsers acima citados, precisamos desenvolver um DHTML crossbrowser, ou seja, um DHTML que funcione em diversos browsers.

Dessa forma, utilizaremos o DOM do W3C que tem o suporte em todos os navegadores atuais.

Um exemplo prático do DHTML

Observe o exemplo abaixo:


			JavaScript

			<script type="text/javascript">

			function changeClass(nomeClasse) {

			 var obj = document.getElementById("box");

			 obj.className = nomeClasse;

			}

			</script>


			HTML

			<div id="conteudo" class="destaque">

			 <h1>Ma quande lingues coalesce</h1>

			 <p>Lorem ipsum dolor sit amet, consectetuer ...</p>

			 <a href="../../noscript.htm" onclick="changeClass('nodestaque'); return false;">Altere minha aparência</a>

			</div>


			CSS

			#conteudo {

			 width: 500px;

			 padding: 15px;

			 line-height: 1.5em;

			}

			.destaque {

			 background-color: #ffc;

			 border: 1px solid #fc6;

			}

			.nodestaque {

			 background-color: #fff;

			 border: 1px solid #000;

			}

Veja a demonstração desse exemplo prático de DHTML.

Agora, vamos compreendê-lo.

Utilizamos três tecnologias (HTML, CSS e JavaScript) para o recurso demonstrado no exemplo e o DOM para acessarmos um elemento da página.

Na marcação HTML, fizemos o seguinte: criamos uma <div> e adicionamos a ela dois atributos - id (conteudo) e class (destaque). Aninhado a essa tag temos um título de primeiro nível (h1), um paragráfo (p) e um link (a).

No link Altere minha aparência, adicionamos o evento onclick que chama a função changeClass, passando a ela o nome da nova classe, (nodestaque), que gostaríamos de colocar na <div>.

A função JavaScript changeClass recebe o parâmetro (nodestaque) passado a ela e o utiliza para adicionar ao objeto desejado (conteudo) uma nova classe CSS.

Quanto ao getElementById e className, não se preocupe, nós os veremos adiante.