Dynamisk HTML - Dynamic HTML

HTML
Jämförelser

Dynamisk HTML , eller DHTML , är en samling tekniker som används tillsammans för att skapa interaktiva och animerade webbplatser med hjälp av en kombination av ett statiskt markeringsspråk (t.ex. HTML ), ett skriptspråk på klientsidan (till exempel JavaScript ), ett språk för presentationsdefinitioner (t.ex. CSS ) och Document Object Model (DOM). Tillämpningen av DHTML introducerades av Microsoft med lanseringen av Internet Explorer 4 1997.

DHTML tillåter skriptspråk att ändra variabler i en webbsides definitionsspråk, vilket i sin tur påverkar utseendet och funktionen för annars "statiskt" HTML -sidinnehåll efter att sidan har laddats helt och under visningsprocessen. Således är den dynamiska egenskapen för DHTML hur den fungerar medan en sida ses, inte i dess förmåga att generera en unik sida med varje sidinläsning.

Däremot är en dynamisk webbsida ett bredare koncept som täcker alla webbsidor som genereras annorlunda för varje användare, belastningsförekomst eller specifika variabelvärden. Detta inkluderar sidor som skapats av skript på klientsidan och sådana som skapats av skript på serversidan (t.ex. PHP , Python , JSP eller ASP.NET ) där webbservern genererar innehåll innan det skickas till klienten.

DHTML skiljer sig från Ajax genom att en DHTML-sida fortfarande är förfrågnings-/omladdningsbaserad. Med DHTML kanske det inte finns någon interaktion mellan klienten och servern efter att sidan har lästs in. all behandling sker i JavaScript på klientsidan. Däremot använder en Ajax -sida funktioner i DHTML för att initiera en begäran (eller 'subfråga') till servern om att utföra ytterligare åtgärder. Till exempel, om det finns flera flikar på en sida, skulle ren DHTML -metod ladda innehållet på alla flikar och sedan dynamiskt bara visa den som är aktiv, medan AJAX bara kunde ladda varje flik när det verkligen behövs.

Användningsområden

DHTML tillåter författare att lägga till effekter på sina sidor som annars är svåra att uppnå, genom att ändra Document Object Model (DOM) och sidstil. Kombinationen av HTML, CSS och JavaScript erbjuder sätt att:

  • Animera text och bilder i dokumentet.
  • Bädda in en ticker eller annan dynamisk skärm som automatiskt uppdaterar innehållet med de senaste nyheterna, aktiekurser eller annan data.
  • Använd ett formulär för att fånga användarinmatning och bearbeta, verifiera och svara på data utan att behöva skicka data tillbaka till servern.
  • Inkludera rullningsknappar eller rullgardinsmenyer.

En mindre vanlig användning är att skapa webbläsarbaserade actionspel. Även om ett antal spel skapades med DHTML under slutet av 1990 -talet och början av 2000 -talet, gjorde skillnader mellan webbläsare detta svårt: många tekniker måste implementeras i kod för att spelen ska fungera på flera plattformar. Nyligen har webbläsare konvergerat mot webbstandarder , vilket har gjort utformningen av DHTML -spel mer livskraftig. Dessa spel kan spelas i alla större webbläsare och de kan också överföras till Plasma för KDE , widgets för macOS och gadgets för Windows Vista , som är baserade på DHTML -kod.

Begreppet "DHTML" har fallit ur bruk under de senaste åren eftersom det förknippades med metoder och konventioner som tenderade att inte fungera bra mellan olika webbläsare.

DHTML -stöd med omfattande DOM -åtkomst introducerades med Internet Explorer 4.0 . Även om det fanns ett grundläggande dynamiskt system med Netscape Navigator 4.0 , var inte alla HTML -element representerade i DOM. När tekniker i DHTML-stil blev utbredda gjorde olika grader av stöd bland webbläsare för den inblandade tekniken det svårt att utveckla och felsöka . Utvecklingen blev lättare när Internet Explorer 5.0+ , Mozilla Firefox 2.0+ och Opera 7.0+ antog en delad DOM som ärvdes från ECMAScript .

På senare tid har JavaScript-bibliotek som jQuery tagit bort många av de dagliga svårigheterna med DOM-manipulation mellan webbläsare.

Struktur för en webbsida

Se även: DOM -evenemang

Vanligtvis konfigureras en webbsida med DHTML på följande sätt: 

<!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>

Exempel: Visa ytterligare ett textblock

Följande kod illustrerar en funktion som ofta används. Ytterligare en del av en webbsida visas bara om användaren begär det. 

<!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>

Dokumentobjektmodell

Huvudartikel: Document Object Model

DHTML är inte en teknik i sig; det är snarare en produkt av tre relaterade och kompletterande tekniker: HTML, Cascading Style Sheets (CSS) och JavaScript . För att låta skript och komponenter få åtkomst till funktioner i HTML och CSS representeras dokumentets innehåll som objekt i en programmeringsmodell som kallas Document Object Model (DOM).

DOM API är grunden för DHTML, som ger ett strukturerat gränssnitt som möjliggör åtkomst och manipulation av praktiskt taget vad som helst i dokumentet. HTML -elementen i dokumentet är tillgängliga som ett hierarkiskt träd för enskilda objekt, vilket gör det möjligt att undersöka och modifiera ett element och dess attribut genom att läsa och ställa in egenskaper och genom att anropa metoder. Texten mellan elementen är också tillgänglig via DOM -egenskaper och metoder.

DOM ger också åtkomst till användaråtgärder som att trycka på en knapp och klicka med musen. Det är möjligt att fånga upp och bearbeta dessa och andra händelser genom att skapa händelsehanteringsfunktioner och rutiner. Händelsehanteraren får kontroll varje gång en given händelse inträffar och kan utföra alla lämpliga åtgärder, inklusive att använda DOM för att ändra dokumentet.

Dynamiska stilar

Dynamiska stilar är en nyckelfunktion i DHTML. Genom att använda CSS kan man snabbt ändra utseende och formatering av element i ett dokument utan att lägga till eller ta bort element. Detta hjälper till att hålla dokument små och skript som manipulerar dokumentet snabbt.

Objektmodellen ger programmatisk åtkomst till stilar. Detta innebär att du kan ändra inline -stilar på enskilda element och ändra stilregler med hjälp av enkel JavaScript -programmering.

Inlinestilar är CSS -stiltilldelningar som har tillämpats på ett element med stilattributet. Du kan undersöka och ställa in dessa stilar genom att hämta stilobjektet för ett enskilt element. Till exempel, för att markera texten i en rubrik när användaren flyttar muspekaren över den, kan du använda stilobjektet för att förstora teckensnittet och ändra dess färg, som visas i följande enkla exempel. 

<!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>

Se även

Referenser

externa länkar