DHTML

Geschätzte Lektüre: 4 Minuten 418 Ansichten

DHTML (Dynamic HTML) ist keine eigene Programmiersprache, sondern eine Kombination aus HTML, CSS und JavaScript, um interaktive und dynamische Webseiten zu erstellen. Im Gegensatz zu statischem HTML ermöglicht DHTML:
• Änderungen der Seite ohne Neuladen (z. B. ein- und ausblendbare Menüs).
• Echtzeit-Animationen und Effekte (z. B. bewegte Elemente).
• Benutzerinteraktionen (z. B. Formularvalidierung, Drag & Drop).

Beispiel: Eine einfache DHTML-Anwendung

Ziel: Ein Klick auf einen Button ändert den Text und die Farbe einer Box.

HTML (Grundgerüst)

<!DOCTYPE html>
<html>
<head>
    <title>DHTML-Beispiel</title>
    <style>
        #box {
            width: 200px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">Klick mich nicht!</div>
    <button onclick="changeBox()">Ändern!</button>

    <script>
        function changeBox() {
            const box = document.getElementById("box");
            box.innerHTML = "Ich wurde geändert!";
            box.style.backgroundColor = "pink";
        }
    </script>
</body>
</html>

Erklärung:
01. HTML definiert eine Box (<div>) und einen Button.
02. CSS gestaltet die Box.
03. JavaScript (onclick) ändert Inhalt (innerHTML) und Farbe (style.backgroundColor) dynamisch.
➡ Ohne Seitenneuladen passiert die Änderung!

Typische DHTML-Anwendungen

Ein- und Ausblenden von Inhalten (Dropdown-Menü)

<style>
    #dropdown-content { display: none; }
</style>

<button onclick="document.getElementById('dropdown-content').style.display = 'block'">
    Menü öffnen
</button>
<div id="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</div>

Bildergalerie mit Dynamischem Wechsel

let currentImage = 1;
function nextImage() {
    currentImage++;
    document.getElementById("gallery-img").src = "bild" + currentImage + ".jpg";
}

Drag & Drop (z. B. für Uploads)

const box = document.getElementById("drag-box");
box.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", "Ziel: Drop-Bereich");
});

Warum ist DHTML wichtig?

• Grundlage für moderne Webentwicklung (auch wenn heute Frameworks wie React genutzt werden).
• Keine Plugins nötig (im Gegensatz zu Flash).
• Schnelle Reaktion auf Nutzeraktionen (z. B. Mouseover-Effekte).
>>> Achtung: Reines DHTML wird heute oft durch Frameworks ersetzt, aber das Prinzip bleibt gleich!

Zusammenfassung

• DHTML = HTML + CSS + JavaScript + DOM.
• Ermöglicht dynamische Änderungen ohne Neuladen.
• Wird für Menüs, Animationen, Formulare und mehr genutzt.
• Moderne Frameworks bauen auf diesen Konzepten auf.

Dieses Dokument teilen

DHTML

Oder Link kopieren

INHALT

Abonnieren

×
Cancel