Apostila retirada de http://www.ibestmasters.com.

br

DHTML - MDULO 1: VISO GERAL E INTRODUO Por Marcelo Camargo Viso geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto de inovaes ao Internet Explorer 4.0. DHTML disponibiliza para o criador de uma pgina web a habilidade de criar documentos que interagem com o usurio, sem a necessidade de um processamento do lado do servidor. A tecnologia DHTML nos disponibiliza, entre outras coisas: Animao: atravs da movimentao de elementos em uma pgina. Formatao e posicionamento: atravs da flexibilidade para formatar elementos HTML, como a alterao dinmica de cor, tamanho, fonte, posicionamento e outras caractersticas. Interao: atravs de uma linguagem de programao, como o JavaScript, para gerar interao com o usurio. Iremos atravs deste tutorial entender como essa tecnologia funciona e explorar as suas mais importantes facetas. Primeiramente iremos entender o que DHTML, atravs de uma introduo a essa tecnologia. Essa introduo importante para dividir nosso estudo em partes, de forma a explorar cada uma dessas partes em tempos diferentes. Neste mdulo iremos responder pergunta "O que DHTML?", alm de conhecer as vrias partes que compe essa tecnologia. O que DHTML? Muitos pensam que a tecnologia DHTML (Dinamic HTML) uma linguagem. Errado. DHTML no uma linguagem, mas sim um conjunto de tecnologias que juntas disponibilizam as ferramentas necessrias para tornar dinmica a nossa conhecida linguagem HTML. Essas tecnologias so: - HTML (Hyper Text Markup Language): A conhecida linguagem baseada em tags para a construo de pginas web estticas. - CSS (Cascading Style Sheets): Conhecida como folhas de estilo, essa tecnologia permite controlar a formatao dos diversos elementos que compem uma pgina web. - CSS Positioning: Permite a alterao do posicionamento de um elemento da pgina como textos e imagens dinamicamente, atravs de uma linguagem client scripting. - Client scripting: Trata-se de um pequeno programa, que ser interpretado pelo browser do cliente e no no servidor. Algumas linguagens de scripting que podem ser utilizadas so JavaScript e VBScript.

- DOM (Document Object Model): Trata-se do modelo de objetos (com suas propriedades e mtodos) que so expostos ao programador DHTML. Atravs do envio de mensagens a estes objetos, o programador pode explorar a interatividade com o usurio.

Mas, qual o papel de cada uma dessas tecnologias? Bem, vamos analisar um exemplo simples para entendermos melhor. Mais adiante, nestes tutoriais, iremos entrar em mais detalhes sobre a integrao entre essas tecnologias. Suponha uma pgina que movimente, de um lado a outro horizontalmente, o texto "Ol Mundo DHTML!", alterando de tempos em tempos sua formatao (cor e tamanho). Para fazer isso, primeiramente precisamos da linguagem HTML para montar a pgina. Para a formatao do texto, utilizamos CSS que nos possibilita a alterao da cor e do tamanho da fonte. Mas, e para fazer o movimento do texto? Bem, aqui que entra a parte mais interessante de DHTML, o DOM. Atravs do DOM poderemos acessar o objeto que controla o texto e alterar as suas propriedades de posicionamento (CSS Positioning). Ento podemos mudar as coordenadas X e Y do posicionamento, e com isso movimentar o texto. E como acessamos os objetos do DOM? Isso ser possvel atravs da utilizao de uma linguagem de scripting como JavaScript ou VBScript. Caractersticas de DHTML Antes de prosseguirmos, iremos conhecer algumas caractersticas da tecnologia DHTML, para no sermos pegos de surpresa no futuro. - Performance: Qual a performance que pode ser obtida com DHTML? Como vimos, o processamento realizado localmente, ou seja, no browser do usurio, o que garante boa performance j que no exige o trfego de informaes pela rede durante a interao. - Compatibilidade: O DHTML no apresenta boa compatibilidade entre os browsers. Na verdade no existe um padro para o DOM, que o centro dessa tecnologia. Tanto a Microsoft como a Netscape j suportam esse padro a partir das verses 4.0 de seus browsers, mas cada uma com seu modelo de objetos. Logo, o cdigo client scripting deve ser escrito de acordo com o browser destino, a menos que se faa uso das propriedades protegidas, que so um subconjunto das funcionalidades comuns a ambos os browsers. - Orientado a objetos: Cada elemento de uma pgina HTML visto como um objeto, que pode ser acessado e ter suas propriedades, como cor e posicionamento, alteradas dinamicamente. Concluso A tecnologia DHTML nos abre caminho para uma nova gerao de aplicaes

web. Atravs de DHTML possvel ter o total controle sobre os elementos que compes uma pgina HTML, o que nos fornece grande flexibilidade para interagir com o usurio. DHTML - MDULO 2: EXEMPLOS PRTICOS Viso geral No mdulo anterior estudamos quais so e como se integram as diferentes tecnologias que compe a DHTML. Neste mdulo veremos um exemplo prtico de sua aplicao. Iremos analisar cada parte do cdigo, entendendo os objetos, mtodos e propriedades envolvidos. Esse mdulo fornece a base para o entendimento de como utilizar a tecnologia DHTML na prtica. A partir disso o leitor ser capaz de estudar novos objetos, propriedades e mtodos, de forma a criar seus prprios efeitos e aplicaes com DHTML. Exemplo de Menu com DHTML O exemplo consiste na criao de um efeito de menu para pginas web. Quando o usurio passa o mouse sobre o texto de um item do menu, a formatao do texto do item alterada da seguinte forma: adio de efeito "underline" (sublinhado) ao texto. alterao de cor do texto. Com a retirada do mouse sobre o texto do item, sua formatao normal restaurada. Esse efeito bastante utilizado por diversos sites na Internet. O cdigo apresentado funcionar apenas com o Internet Explorer devido as diferenas existentes no DOM entre navegadores. Para a implementao deste exemplo, utilizaremos as seguintes tecnologias de DHTML (alm da conhecida linguagem HTML): CSS (Cascading Style Sheets): Conhecida como folhas de estilo, essa tecnologia permite controlar a formatao dos diversos elementos que compe uma pgina web. Client scripting: Trata-se de um pequeno programa, que ser interpretado pelo browser do cliente e no no servidor. Algumas linguagens de scripting que podem ser utilizadas so JavaScript e VBScript. DOM (Document Object Model): Trata-se do modelo de objetos (com suas propriedades e mtodos) que so expostos ao programador DHTML. Atravs do envio de mensagens a estes objetos, o programador pode explorar a interatividade com o usurio.

Nossa pgina DHTML inicia com a declarao das folhas de estilo. Atravs das folhas de estilo, criaremos dois estilos que sero utilizados em nosso efeito: o estilo "normallink" para a formatao do texto normal (sem o mouse sobre o texto) e o estilo "ativolink" para a formatao do texto ativo (com o mouse sobre o texto). A sintaxe a seguir deve ser utilizada para essa declarao:

<style> <!.normallink {color: #336699; text-decoration: none} .ativolink {color: #0099ff; text-decoration: underline} -> </style> Para a declarao de um estilo deve-se utilizar o ponto "." antes de seu nome. Em seguida declarar entre chaves "{}" as propriedades e seus valores. A propriedade color indica a cor do texto no formato RGB em hexadecimal, ou seja, os dois primeiros dgitos so o valor em hexadecimal da cor vermelho, os dois seguintes da cor verde e os dois ltimos da cor azul. A propriedade textdecoration controla a apresentao ou no da linha sublinhando o texto de um link (o padro na web apresentar um link sublinhado). As propriedades, mtodos e objetos disponveis para programao so definidos pelo DOM. O prximo passo adicionar estes estilos ao nosso menu. O cdigo a seguir complementa nossa pgina de exemplo e apresenta os menus j com os estilos.

<html> <head> <style> <!.normallink {color: #336699; text-decoration: none} .ativolink {color: #0099ff; text-decoration: underline} -> </style> <title>Exemplo de menu com DHTML</title> </head> <body> <p> <a href="menu.htm" class="normallink" OnMouseOver="className = 'ativolink';" OnMouseOut="className = 'normallink';">Empresa</a> <a href="menu.htm" class="normallink" OnMouseOver="className = 'ativolink';" OnMouseOut="className = 'normallink';">Clientes</a>

<a href="menu.htm" class="normallink" OnMouseOver="className = 'ativolink';" OnMouseOut="className = 'normallink';">Ajuda</a> </p> </body> </html>

Primeiramente definimos a classe a qual o texto pertence atravs da propriedade class. Dessa forma o texto j aparece com o estilo normallink. Depois fazemos a ligao entre os eventos OnMouseOver (mouse sobre o texto) e OnMouseOut (mouse fora do texto) com a execuo de cdigos em JavaScript que alteram a propriedade classname dos elementos. Dessa forma quando o usurio passa o mouse sobre o texto, ocorre a ativao do evento OnMouseOver que dispara a execuo do cdigo em JavaScript "classname = 'ativolink' " alterando o estilo do texto para a formatao definida. Quando da sada do mouse sobre o texto, o evento OnMouseOut executado e o texto volta a seu estilo normal. Realizamos esse mesmo procedimento para os trs textos de nosso menu: Empresa, Clientes e Ajuda. Existem outras formas de obter o mesmo resultado, sem a necessidade de escrever para cada item de menu os eventos OnMouseOver e OnMouseOut, como a utilizao do modificador hover na declarao das folhas de estilo. Para visualizar essa pgina em execuo, salve-a num diretrio temporrio com o nome menu.htm e abra-a a partir do Internet Explorer. Concluso Agora que j criamos nosso primeiro efeito com DHTML e conhecemos na prtica o relacionamento entre suas tecnologias, veremos no prximo mdulo mais detalhes sobre o DOM, seus objetos, propriedades e mtodos disponveis para programao. DHTML - MDULO 3: DOCUMENT OBJECT MODEL Viso geral No mdulo anterior estudamos um exemplo prtico de como fazer um efeito de menu para pginas Web. Neste mdulo iremos conhecer em mais detalhes o Document Object Model (DOM - Modelo de Documento Objeto). O DOM o mecanismo que permite a programao DHTML. O DOM modelo de objetos expostos pelo navegador e acessvel a partir de uma linguagem de client-

scripting (linguagem cujo cdigo executado no navegador do visitante), como JavaScript ou VBScript. O Object Model j existia em verses anteriores dos navegadores atuais, como o Microsoft Internet Explorer 3.x e Netscape 3.x, porm numa forma bem reduzida. A sua nova verso, que vem com o Internet Explorer verses 4 e 5, permite acesso a todos os elementos HTML de uma pgina. Isso significa que cada elemento HTML de uma pgina pode ter um script associado, o qual interage com o usurio ou muda o contedo da pgina dinamicamente, sem a necessidade de um novo acesso ao servidor Web. O DOM possui um Event Model (Modelo de Evento) que permite associar eventos do usurio a client-scripts programados numa pgina Web. O Event Model permite que um documento reaja a uma ao (evento) do usurio sobre um elemento HTML, como movimentar o mouse sobre um determinado elemento, pressionar uma tecla ou entrar informao numa caixa de texto de um formulrio. Cada evento pode disparar um client-script que pode utilizar o DOM para alterar as caractersticas de elementos HTML e at mesmo alterar o contedo da pgina, adicionando ou removendo partes do documento sem acesso ao servidor Web. Devido aos client-scripts serem executados diretamente pelo navegador do usurio, isso implica num ganho de performance e velocidade. Acessando elementos HTML com Script Cada elemento HTML representa um objeto no Document Object Model, o qual tem seu prprio conjunto de propriedades, mtodos e eventos. Entretanto para escrever scripts o programador precisa entender como interagir com esses objetos. O modelo de objetos montado quando o navegador recebe as informaes da pgina HTML e as apresenta ao usurio. Nesse momento os objetos so dispostos numa hierarquia, onde existem pais e filhos. Esses elementos so organizados em colees de objetos relacionados. As colees mais importantes so all e children. Vejamos o exemplo a seguir: <HTML> <BODY> <DIV> <P>Algum texto em um <B>paragraph</B> <IMG id=imagem1 src="imagem.gif"> </DIV> <IMG id=imagem2 src="imagem.gif"> </BODY> </HTML> Neste exemplo o objeto DIV contm ( pai) o objeto P e o objeto IMG de nome imagem1. O objeto IMG de nome imagem2 filho do objeto BODY. E todos os objetos so filhos do objeto HTML. Cada objeto possui as colees all e children.

No exemplo, a coleo all do objeto DIV contm os objetos P, B e IMG de nome imagem1, porm, a sua coleo children contm apenas os objetos P e IMG de nome imagem1. Alm das colees para cada elemento HTML, este documento HTML possui tambm suas colees. A coleo all do objeto document possui todos os elementos da pgina e a forma primria de acesso a todos os objetos. Para que seja mais fcil se acessar elementos HTML a partir de scripts, deve-se dar um nome a eles. Em nosso exemplo cada imagem tem um nome diferente. Especificamos o nome de um elemento HTML atravs do comando ID dentro da declarao desse elemento. Podemos ento acessar um elemento nomeado da seguinte forma: document.all.nome_do_elemento.propriedade_ou_mtodo Eventos Clicar em um boto, mover o mouse sobre uma parte do documento, selecionar texto... todas essas aes disparam eventos do DOM, que podem ser programados atravs de client-scripting. Outros navegadores j possuam eventos - como o Internet Explorer 3.x e Netscape 3.x. Porm esses eventos foram largamente expandidos no Internet Explorer 4. Na verdade, todos os elementos HTML disparam eventos nessa verso do navegador. Isso disponibiliza ao programador uma enorme flexibilidade para interagir com o usurio. A lista seguinte representa o conjunto de eventos mais comuns que os elementos HTML possuem: Eventos de mouse onmouseover onmouseout onmousedown onmouseup onmousemove onclick ondblclick Gerados quando o usurio: Move o ponteiro do mouse para dentro da rea de um elemento. Move o ponteiro do mouse para fora da rea de um elemento. Pressiona qualquer um dos botes do mouse. Libera qualquer um dos botes do mouse. Move o mouse dentro da rea de um elemento. Clica o boto esquerdo do mouse sobre um elemento. Efetua um duplo clique com o boto esquerdo do mouse sobre um elemento.

Eventos de teclado onkeypress onkeydown onkeyup

Gerados quando o usurio: Pressiona e solta uma tecla (o ciclo completo). Pressiona uma tecla (ainda com a tecla abaixada). Solta uma tecla.

Quando um evento disparado para um elemento HTML, caso este possua ou no um manipulador para trat-lo, ele subir tambm para o seu objeto pai na hierarquia. Este evento vai subindo at chegar no objeto document que est no topo da hierarquia. Isso chamado de Event Bubbling. Para interromper a subida de um evento para um objeto pai, o objeto originador do evento deve explicitamente cancel-lo em seu manipulador de evento. Concluso O Document Object Model representa o corao da tecnologia DHTML. Atravs dele interagimos com o navegador e com o usurio. Veremos no prximo mdulo mais alguns exemplos da aplicao prtica dessa tecnologia. DHTML - MDULO 4: UM EXEMPLO DE TEXTO DINMICO Viso geral No mdulo anterior estudamos o Document Object Model (DOM) do Internet Explorer. Foram apresentados vrios eventos disponveis para programao e tambm como enviar mensagens para os objetos do DOM. Neste mdulo veremos um exemplo prtico de como utilizar alguns dos eventos apresentados e tambm de chamadas de propriedades de alguns objetos. Como funciona o texto dinmico O exemplo deste mdulo apresenta um texto que ter suas propriedades alteradas dinamicamente atravs da interao do usurio. Iremos alterar as propriedaes de cor, visibilidade e movimentao do texto na pgina. Como sabemos, cada elemento que colocamos em uma pgina HTML pode ser acessado atravs do DOM. Para simplificar a movimentao do texto, utilizaremos uma tcnica bastante usual: colocar o texto dentro de um container DIV. O DIV, assim como o SPAN,

so elementos HTML que possuem a propriedade de serem containers (ou seja, eles mantm vrios elementos agrupados). Colocaremos nosso texto dentro de um elemento DIV e ento iremos alterar as suas propriedades para realizar as tarefas desejadas. A diferena entre o DIV e o SPAN que o DIV fora uma quebra de linha ao seu final enquanto o SPAN permite vrios elementos na mesma linha. Ao alterarmos as propriedades de um elemento DIV ou SPAN, estas alteraes se refletem em todos os elementos HTML que estes contm. Alterando as propriedades do elemento DIV O elemento DIV, assim como todos os outros elementos de uma pgina HTML, esto expostos atravs da coleo all do objeto document. As definies de estilo (CSS) esto disponveis atravs da propriedade style do elemento HTML desejado. Dessa forma, para acessar as propriedades de estilo de um elemento DIV de identificao 'masters', deve-se utilizar: document.all.masters.style.propriedade = valor O exemplo de texto dinmico O cdigo HTML a seguir apresenta o exemplo de texto dinmico, com alterao de propriedades de estilo como cor, visibilidade e movimentao. Para execut-lo, copie o cdigo para um arquivo com extenso .HTM (por exemplo, dhtml.htm) e abra-o em seu navegador. No preciso ter instalado um servidor web para poder executar a pgina pois o cdigo executado pelo navegador (client-side script): <html> <head> <title>Exemplo de Texto Dinmico</title> <style> <! .ibestmasters { position:ABSOLUTE; TOP:0px; LEFT:140px; VISIBILITY:visible; z-index:2; FONT-SIZE:50px; COLOR:#00FF00; } !> </style> </head>

<script language="javascript"> function ParaDireita() { document.all.masters.style.left=250; } function ParaEsquerda() { document.all.masters.style.left=140; } function ParaBaixo() { document.all.masters.style.top=50; } function ParaCima() { document.all.masters.style.top=0; } </script> <body> <table> <tr> <td height="100"><div ID="masters" CLASS="ibestmasters"><p>iBest.Masters</p> </div></td> </tr> </table> <form> <p><input type="button" value="Azul" onclick="document.all.masters.style.color='0000FF'"> <input type="button" value="Verde" onclick="document.all.masters.style.color='00FF00'"><br> <input type="button" value="Ocultar" onclick="document.all.masters.style.visibility='hidden'"> <input type="button" value="Exibir" onclick="document.all.masters.style.visibility='visible'"><br> <input type="button" value="Esquerda" onclick="ParaEsquerda();"><input type="button" value="Direita" onclick="ParaDireita();"><br> <input type="button" value="Para Cima" onclick="ParaCima();"><input type="button" value="Para Baixo" onclick="ParaBaixo();"></p> </form> </body> </html> O evento OnClick Neste exemplo utilizamos o evento OnClick. Como vimos no mdulo anterior, esse evento disparado quando o usurio pressiona o boto esquerdo do mouse sobre um elemento HTML. Mas para que isso funcione precisamos ligar esse

evento execuo de um cdigo em JavaScript. Para que isso ococrra, em nosso exemplo colocamos o evento OnClick() associado a cada boto da pgina. Dessa forma quando o usurio pressiona um dos botes da pgina, o evento associado ao boto pressionado disparado e o cdigo JavaScript adequado executado. O seguinte cdigo exemplifica essa ligao: <input type="button" value="Para Cima" onclick="ParaCima();"> Concluso Atravs da tecnologia DHTML possvel realizar a alterao das propriedades de qualquer elemento de uma pgina. A utilizao de containers como os elementos DIV e SPAN fornece mais flexibilidade e facilidade de implementao de cdigos que devem agir sobre vrios elementos HTML simultaneamente. Para mais informaes... Para informaes adicionais, consulte os links a seguir. Portal do Web Developer no Brasil Recomendao do W3C para Cascading Style Sheets (CSS) Tutorial JScript, a implementao do JavaScript pela Microsoft