HTML dinâmico - Dynamic HTML

HTML dinâmico , ou DHTML , é uma coleção de tecnologias usadas em conjunto para criar sites interativos e animados usando uma combinação de uma linguagem de marcação estática (como HTML ), uma linguagem de script do lado do cliente (como JavaScript ), uma linguagem de definição de apresentação (como CSS ) e o Document Object Model (DOM). A aplicação de DHTML foi introduzida pela Microsoft com o lançamento do Internet Explorer 4 em 1997.

O DHTML permite que as linguagens de script alterem variáveis na linguagem de definição de uma página da web, o que, por sua vez, afeta a aparência e a função do conteúdo da página HTML "estático", após a página ter sido totalmente carregada e durante o processo de exibição. Portanto, a característica dinâmica do DHTML é a maneira como funciona enquanto uma página é visualizada, não em sua capacidade de gerar uma página única a cada carregamento de página.

Por outro lado, uma página da web dinâmica é um conceito mais amplo, cobrindo qualquer página da web gerada de maneira diferente para cada usuário, ocorrência de carregamento ou valores de variáveis ​​específicos. Isso inclui páginas criadas por scripts do lado do cliente e aquelas criadas por scripts do lado do servidor (como PHP , Python , JSP ou ASP.NET ) onde o servidor da web gera conteúdo antes de enviá-lo ao cliente.

O DHTML é diferenciado do Ajax pelo fato de que uma página DHTML ainda é baseada em solicitação / recarregamento. Com DHTML, pode não haver nenhuma interação entre o cliente e o servidor após o carregamento da página; todo o processamento acontece em JavaScript no lado do cliente. Por outro lado, uma página Ajax usa recursos de DHTML para iniciar uma solicitação (ou 'sub-solicitação') ao servidor para realizar ações adicionais. Por exemplo, se houver várias guias em uma página, a abordagem de DHTML puro carregaria o conteúdo de todas as guias e, em seguida, exibiria dinamicamente apenas a que está ativa, enquanto o AJAX poderia carregar cada guia apenas quando realmente fosse necessário.

Usos

O DHTML permite que os autores adicionem efeitos às suas páginas que, de outra forma, seriam difíceis de obter, alterando o Document Object Model (DOM) e o estilo da página. A combinação de HTML, CSS e JavaScript oferece maneiras de:

  • Anime texto e imagens em seus documentos.
  • Incorpore um ticker ou outro display dinâmico que atualize automaticamente seu conteúdo com as últimas notícias, cotações de ações ou outros dados.
  • Use um formulário para capturar a entrada do usuário e, em seguida, processar, verificar e responder a esses dados sem ter que enviar dados de volta ao servidor.
  • Inclui botões de rollover ou menus suspensos.

Um uso menos comum é criar jogos de ação baseados em navegador. Embora vários jogos tenham sido criados usando DHTML durante o final dos anos 1990 e início dos anos 2000, as diferenças entre os navegadores tornaram isso difícil: muitas técnicas tiveram que ser implementadas no código para permitir que os jogos funcionassem em várias plataformas. Recentemente, os navegadores têm convergido para os padrões da web , o que tornou o design de jogos DHTML mais viável. Esses jogos podem ser jogados em todos os principais navegadores e também podem ser transferidos para Plasma para KDE , Widgets para macOS e Gadgets para Windows Vista , que são baseados em código DHTML.

O termo "DHTML" caiu em desuso nos últimos anos, pois era associado a práticas e convenções que tendiam a não funcionar bem entre vários navegadores da web.

O suporte DHTML com amplo acesso a DOM foi introduzido com o Internet Explorer 4.0 . Embora houvesse um sistema dinâmico básico com o Netscape Navigator 4.0 , nem todos os elementos HTML foram representados no DOM. Quando as técnicas de estilo DHTML se espalharam, vários graus de suporte entre os navegadores da web para as tecnologias envolvidas dificultaram seu desenvolvimento e depuração . O desenvolvimento se tornou mais fácil quando o Internet Explorer 5.0+ , Mozilla Firefox 2.0+ e Opera 7.0+ adotaram um DOM compartilhado herdado do ECMAScript .

Mais recentemente, as bibliotecas JavaScript , como a jQuery , abstraíram muitas das dificuldades do dia-a-dia na manipulação de DOM entre navegadores.

Estrutura de uma página da web

Normalmente, uma página da web usando DHTML é configurada da seguinte maneira:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>DHTML example</title>
    </head>
    <body bgcolor="red">

        <script>
            function init() {
                var myObj = document.getElementById("navigation");
                // ... manipulate myObj
            }
            window.onload = init;
        </script>

        <!--
        Often the code is stored in an external file; this is done
        by linking the file that contains the JavaScript.
        This is helpful when several pages use the same script:
        -->
        <script src="myjavascript.js"></script>
    </body>
</html>

Exemplo: exibição de um bloco de texto adicional

O código a seguir ilustra uma função usada com frequência. Uma parte adicional de uma página da web só será exibida se o usuário solicitar.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using a DOM function</title>
        <style>
            a { background-color: #eee; }
            a:hover { background: #ff0; }
            #toggleMe { background: #cfc; display: none; margin: 30px 0; padding: 1em; }
        </style>
    </head>
    <body>
        <h1>Using a DOM function</h1>
        
        <h2><a id="showhide" href="#">Show paragraph</a></h2>
        
        <p id="toggleMe">This is the paragraph that is only displayed on request.</p>
        
        <p>The general flow of the document continues.</p>
        
        <script>
            function changeDisplayState(id) {
                var d = document.getElementById('showhide'),
                    e = document.getElementById(id);
                if (e.style.display === 'none' || e.style.display === '') {
                    e.style.display = 'block';
                    d.innerHTML = 'Hide paragraph';
                } else {
                    e.style.display = 'none';
                    d.innerHTML = 'Show paragraph';
                }
            }
            document.getElementById('showhide').addEventListener('click', function (e) {
                e.preventDefault();
                changeDisplayState('toggleMe');
            });
        </script>
    </body>
</html>

Modelo de Objeto de Documento

DHTML não é uma tecnologia em si; em vez disso, é o produto de três tecnologias relacionadas e complementares: HTML, Cascading Style Sheets (CSS) e JavaScript . Para permitir que scripts e componentes acessem recursos de HTML e CSS, o conteúdo do documento é representado como objetos em um modelo de programação conhecido como Document Object Model (DOM).

A API DOM é a base do DHTML, fornecendo uma interface estruturada que permite o acesso e a manipulação de praticamente qualquer coisa no documento. Os elementos HTML no documento estão disponíveis como uma árvore hierárquica de objetos individuais, tornando possível examinar e modificar um elemento e seus atributos lendo e definindo propriedades e chamando métodos. O texto entre os elementos também está disponível por meio de propriedades e métodos DOM.

O DOM também fornece acesso às ações do usuário, como pressionar uma tecla e clicar com o mouse. É possível interceptar e processar esses e outros eventos criando funções e rotinas de tratamento de eventos . O manipulador de eventos recebe o controle cada vez que um determinado evento ocorre e pode realizar qualquer ação apropriada, incluindo o uso do DOM para alterar o documento.

Estilos dinâmicos

Os estilos dinâmicos são um recurso chave do DHTML. Usando CSS, é possível alterar rapidamente a aparência e a formatação dos elementos em um documento sem adicionar ou remover elementos. Isso ajuda a manter os documentos pequenos e os scripts que os manipulam rapidamente.

O modelo de objeto fornece acesso programático a estilos. Isso significa que você pode alterar estilos embutidos em elementos individuais e alterar regras de estilo usando programação JavaScript simples.

Estilos embutidos são atribuições de estilo CSS que foram aplicadas a um elemento usando o atributo style. Você pode examinar e definir esses estilos recuperando o objeto de estilo de um elemento individual. Por exemplo, para destacar o texto em um título quando o usuário move o ponteiro do mouse sobre ele, você pode usar o objeto de estilo para aumentar a fonte e alterar sua cor, conforme mostrado no exemplo simples a seguir.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Dynamic Styles</title>
        <style>
            ul { display: none; }
        </style>
    </head>

    <body>
        <h1 id="firstHeader">Welcome to Dynamic HTML</h1>

        <p><a id="clickableLink" href="#">Dynamic styles are a key feature of DHTML.</a></p>

        <ul id="unorderedList">
            <li>Change the color, size, and typeface of text</li>
            <li>Show and hide text</li>
            <li>And much, much more</li>
        </ul>

        <p>We've only just begun!</p>

        <script>
            function showMe() {
                document.getElementById("firstHeader").style.color = "#990000";
                document.getElementById("unorderedList").style.display = "block";
            }

            document.getElementById("clickableLink").addEventListener("click", function (e) {
                e.preventDefault();
                showMe();
            });
        </script>
    </body>
</html>

Veja também

Referências

links externos