Primeiramente, à definição. DHTML é, nada mais, nada menos, que a mistura das 3 principais linguagens que hoje em dia são utilizadas na Web: HTML, CSS (Estilo) e JavaScript! Um exemplo simples e praticíssimo, apenas para deixar com água na boca:
Arraste-me!▼▲
Agora você pode arrastar esta janelinha para onde quiser nesta página, assim como minimiza-la e maximiza-la ao seu interesse. Tudo isto é feito baseado na tecnologia DHTML.
Para utilizá-la, não é preciso grandes conhecimentos em HTML nem em estruturação de WebSites, mas precisa-se ter um grande conhecimento em JavaScript (porque é o principal elo entre as três linguagens) e, para ficar mais visualmente atraente, alguns conhecimentos de Estilo/CSS.
Para começar, listarei aqui algumas das muitas capacidades do DHTML:
- Deixar elementos invisíveis ao toque de um botão;
- Personalizar o texto explicativo ao deixar o mouse sobre um elemento;
- Alterar a cor de fontes, backgrounds, assim como as configurações de uma imagem (filtros);
- Fazer efeitos visuais leves (sem Flash), iterativos (com repetição) e interativos (o usuário pode interferir).
- Entre muitos outros!
Para manipular tudo por código e deixar até a estrutura HTML mais programável, usamos o Javascript. Pode-se usar Javascript pra QUASE tudo, uma vez que podemos estruturar todo o HTML e CSS dentro do código JavaScript. Apenas para questões de compilação e interpretação do navegador, temos que colocar as tags <html/> e <head/>. A partir daí, se quisermos, podemos abusar do Javascript. Então, vamos lá:
<html>
<head>
</head>
<body id="body"> <!--tem que definir 'id' para acesso posterior-->
<script type="text/javascript">
document.getElementById("body").innerHTML = "<div id='div1' style='text-align:center;height:100px;background-color:#AACCFF'/>";
//acrescenta à tag <body> uma <div> com 100px de altura e fundo azul-celeste.
document.getElementById("div1").innerHTML = "<span id='span1' style='background-color:#bb00bb;font-family:Comic Sans MS;color:#ffffff'>Olá, Mundo!</span>";
//acrescenta à tag <div> criada pelo JavaScript um painel <span> com fundo púrpura, fonte Comic Sans MS e cor da fonte branca, já com o texto predefinido "Olá, Mundo!".
document.getElementById("div1").innerHTML +="<br/><br/><input type='text' id='input1' onblur='document.getElementById(\"span1\").innerHTML=this.value;'/>"
//aqui está o segredo! Criamos um <input> do tipo texto que, ao ser desfocado (blur - ou seja, quando perder o foco de digitação) ele chama novamente um comando JavaScript (mesmo dentro do próprio comando JavaScript) para delegar o texto inserido na <input> no <span>.
</script>
</body>
</html>
Não esquecer de salvar isto como .html, se não, não roda!Resultado:
Simples, prático e bastante útil! Abusem e usem do DHTML e as opções que ele tem a oferecer!
Até a próxima :D
Nenhum comentário:
Postar um comentário
Codifique tua mensagem aí: