Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Was ist DHTML?

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
DHMTL (Dynamic HTML) ist im weitesten Sinn die Veränderung einer Webseite, nachdem sie bereits in den Browser geladen wurde. Allgemein versteht man darunter aber die Verbindung von HTML, JavaScript und Style Sheets über das DOM-Objekt style.
04:33

Transkript

DHTML Animationen gehören zu den optisch interessantesten und eindrucksvollsten Dingen, die man in JavaScript machen kann, aber interessanter war es mir mit den programmiertechnisch eher einfachen Sachen. Wobei wir erst mal klären sollten, was die HTML überhaupt bedeutet . Dynamic HTML kann man sich vielleicht noch denken. Erfunden hat dieser Begriff wahrscheinlich Netscape und Microsoft es irgendwann kopiert, aber grundsätzlich ist es nicht festgelegt was DHTML wirklich ist. Sie sehen hier bereits einen Effekt, der im Grunde DHTML ist. Schauen wir uns das mal an. Ich habe hier einen Text, bewege den Mauszeiger darüber, und Sie sehen der Mauszeiger verändert sich und außerdem verändert sich die Hintergrundfarbe. Das ist ein sogenante Hovereffekt. Ich habe nur keinen Deut programmiert. Das ist reines CSS. Wie Sie sehen habe ich hier einen Divbereich mit einer ID und ich weise die Eigenschaft Cursor einem Wert zu für diesen Div und ich nehme einen Pseudoklasse mit Namen Hover und so bald dieser Hovereffekt eintritt, dann wird entsprechend die Hintergrundfarbe verändert. Das ist aber keine echte Programmierung. CSS3 wird noch mehr solche Effekte bringen, aber im grunde ist es eine Beschreibung, es ist keine Programmierung und man kann das als DHTML bezeichnen, muss es aber nicht. Genauso ist es eigentlich DHTML, wenn Sie mit JavaScript Teile der Webseite austauschen. Sie haben innerHTML zur Verfügung und können damit Texte austauschen. Sie können noch Bilder austauschen über Image.source, oder solche Geschichten, das heißt auf reine JavaScript beruhende Effekte, kann man DHTML nennen, muss man aber nicht. Worauf möchte ich raus, im grunde versteht man allgemein DHTML als die Verbindung von HTML Stylesheets und Javascript. Und wir gucken uns jetzt in diesem Film noch an, wie man diese Verbindung überhaupt vornehmen kann, denn im grunde ist CSS JavaScript und HTML etwas was nicht so direkt erst mal miteinander in Verbindung zu bringen ist, es sei den, man hat eine Schnittstelle, oder allgemeiner man hat ein Objekt über das, dass geht. Und das haben wir, das nennt sich Style. Betrachten wir mal diese Seite. Vielleicht nicht gerade die schönste Seite, aber offensichtlich ist hier was mit Stylesheets formatiert worden, nur das habe ich nicht statisch gemacht, das habe ich dynamisch gemacht mit JavaScript. Das hier ist die Webseite und Sie sehen hier eine Referenz auf eine JavaScript-Datei und die wollen wir uns auch noch einmal ansehen. Und das wäre Sie. Und es gibt nur eine Stelle die momentan interessant ist, das da. Das ist eine Eigenschaft von jedem Domelement mit einer sichtbaren Repräsentation, Zeilenumbruch hat jetzt nicht direkt eine Stylesheeteigenschaft. Es ist unsinnig, aber wenn sie irgendetwas mit einer sichtbaren Repräsentation der Seite haben, eine Überschrift, eine Grafik, eine Tabellenzelle, ein Dev, vollkommen egal, dann haben die eine Eigenschaft Style und das ist eine Objektrepräsentation von einem Stylesheet undallgemein den Stylesheets. Und wenn Sie dann wieder noch einen Punkt Machen, kommen Sie an sämtliche CSS-Eigenschaften heran, die Sie normalerweise mit CSS hin schreiben können. Bitte beachten Sie, dass bei zusammengesetzten Ausdrücken hier die Camelnotation zum Einsatz kommt, wenn Sie unter normalen Stylesheet backgroundColor hinschreiben, dann schreiben wir das Jahr mit einem Bindestrich und mit einem kleinem c und hier eben der CAmelnitation zusammen und mit einem Großbuchstaben, genauso hier auch bei textAlign, aber sonst können Sie sämtliche Kenntnisse, die Sie von CSS haben, sofort übernehmen und mit diesem Styleobjekt arbeiten. Von daher, wie ich schon sagte, ist es eigentlich ein ganz einfache Technik DHTML. Natürlich müssen wir uns noch einige Spezialeffekte da ansehen, aber im grunde, wenn Sie CSS können, können Sie das Styleobjeckt bedienen. Und sollten Sie an der Stelle aber nicht vermuten, dass man so statisch Webseiten formatieren sollte. Auf keinen Fall. Was statisch zu tun es gehört in eine externe CSS Datei. Sie wollen ja eine Trennung von Struktu, Layout und Funktionalität haben, soweit es irgendwie nur geht. Und das widerspricht dem natürlich, aber wenn das jetzt ein dynamischer Effekt wäre, Mouseover oder so irgendwas, ist das der Zugang schlechthin. Von daher sollten Sie sich merken, dass DHTML wie gesagt eine Verbindung von Stylesheets, HTML und Javascript ist und der Schlüssel dazu ist das Styleobjekt.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!