JavaScript lernen

DHTML

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit DHTML können Sie dynamisch eine Webseite manipulieren. In der Regel verändern Sie dazu die Stylesheets eines Objekts. Den Zugang liefert das "style"-Objekt, doch Sie können auch direkt andere HTML- bzw. DOM-Attribute verändern.
06:22

Transkript

In diesem Video werden wir uns mit dem Thema DHTML beschäftigen, also "Dynamisches HTML". Ein Begriff, der nicht standardisiert ist, aber im Wesentlichen solche Situationen beschreibt. Wie Sie sehen, verändert sich die Webseite, nachdem Sie bereits im Browser geladen ist, in irgendeiner Form. In diesem Fall wird schlicht und einfach die Farbe von dem Text von dem Hintergrund des Textes und die Schriftgröße verändert. Zusätzlich sehen Sie, dass auch der Mauszeiger eine andere Form annimmt. So etwas nennt man wie gesagt DHTML. Es ist ein Grenzgebiet zur Animation, und man kann es auch nicht so genau trennen, ob das jetzt ein DHTML-Effekt oder ein Animationseffekt ist. Wir wollen in diesem Video den Fokus auf das legen, was da für beide Techniken im Hintergrund liegt, im Wesentlichen aber den DHTML-Teil behandeln. Wie kann man so was machen? Das kann man mit JavaScript machen, aber sogar auch ohne JavaScript, denn diese Seite benutzt kein JavaScript. Das ist alles was hier passiert. Wie Sie sehen, arbeite ich hier ausschließlich mit Stylesheets. Ich benutze ein internes Stylesheet, nur der Übersicht halber. Selbstverständlich sollten Sie in der Praxis mit externen Stylesheets arbeiten, aber das ändert nichts an der grundsätzlichen Vorgehensweise. Es gibt in CSS so genannte Pseudoklassen, die mit einem Doppelpunkt beginnen, und eine Pseudoklasse heißt :hover und das ist dieser Hover-Effekt. Wenn der Mauszeiger über ein Objekt drüber geht, dann wird das angewendet, was hier als Regeln notiert ist. In dem Fall wird der Hintergrund rot, die Schrift weiß und die Textgröße auf 30 Pixel festgelegt. Also definitiv keinerlei Programmierung und trotzdem einer der typischen Effekte, den man so im DHTML-Umfeld findet. Allerdings ist diese Technik sehr eingeschränkt, denn grundsätzlich kann man nur das Objekt beeinflussen, wo man gerade diesen Hover-Effekt auslöst und nicht ein anderes gegebenenfalls, und zum anderen bin ich auch wirklich auf das beschränkt, was man mit CSS machen kann. Gerade im Animationsbereich fehlen da sehr viele Möglichkeiten. Betrachten wir nun mal diese Seite. Sie ist mit CSS offensichtlich formatiert, und es tritt hier auch so ein Hover-Effekt auf. Aber hier arbeite ich wirklich mit JavaScript, und eigentlich dem, was man tatsächlich als DHTML bezeichnet. Schauen wir uns den Quelltext an. Sie sehen eine einfache Webseite mit einigen Überschriften der Ordnung 2 und 3 und 1, und Sie sehen hier die Referenz auf eine externe JavaScript-Datei. Es ist keinerlei Stylesheet zu erkennen. Ich benutze auch kein Stylesheet, zumindest nicht direkt. Stattdessen benutze ich ein Objekt namens Style. Style ist ein DOM-Objekt, das für jedes sichtbare Element in einer Webseite zugänglich ist. Alles, was Sie mit Stylesheets formatieren können, können Sie über das Style-Objekt dynamisch ansprechen. Ich selektiere hier z.B. die Überschrift der Ordnung h3, davon die 1., und nehme deren Eigenschaft style. Das Style-Objekt ist auch als Eigenschaft zu sehen, und kann dann über die Punktnotation sämtliche verfügbaren CSS-Eigenschaften ansprechen. Hier weise ich den Wert yellow zu. Hier nehme ich den body, den ersten der Webseite. Das ist ein bisschen überflüssig scheinbar mit dieser 0, aber Sie müssen es machen, weil ich in diesem Fall mit getElementsByTagName arbeite und ein Array bekomme, auch wenn es nur ein body geben kann, nehme die Eigenschaften backgroundColor, color und textAlign, weise auch da Werte zu. Ich habe bewusst backgroundColor und textAlign gewählt, denn wer sich im CSS gut auskennt, wird hier einen Unterschied zu der Schreibweise sehen, die man beim CSS macht. Bei CSS wird diese Eigenschaft komplett kleingeschrieben, und an der Verbindungsstelle, wie zwischen background und color, haben Sie einen Bindestrich. In JavaScript bzw. im DOM, in dem Style-Objekt, benutzen Sie die Camel-Notation, D.h. diese zusammengesetzten Bezeichner werden noch immer zusammen geschrieben, aber dann mit einem Großbuchstaben begonnen. Das sehen Sie bei backgroundColor, das sehen Sie aber auch bei textAlign. Nun sollten Sie sich fragen, warum ich eigentlich diesen Aufwand treibe, etwas mit JavaScript und diesem Style-Objekt relativ umständlich hinzuschreiben, wenn ich das viel einfacher über Stylesheets machen könnte. Ich könnte ja einfach hinschreiben body und dann diese Regeln festlegen oder h3, und dann diese Regeln. Die Sache wird dann interessant, wenn Sie Logik in diese Vergabe implementieren wollen. Sie sehen hier bspw. eine Schleife, ich iteriere über alle Eigenschaften vom Typ h2, und mit der Eigenschaft length bekomme ich die Anzahl. Jedes Array hat eine Eigenschaft length, was die Anzahl der enthaltenen Elemente anzeigt. Ich weise jetzt über die C-Variable den Überschriften jeweils eine Vordergrund- und eine Hintergrundfarbe zu. Jetzt überlegen Sie sich mal, ich würde hier eine Logik einbauen. Ich würde nur jeder zweiten Überschrift eine bestimmte Information geben wollen, die mit einem geraden Index bspw., und die mit einem ungeraden eine andere. Ich kann also hier Logik reinbringen, und das macht die Sache sehr spannend. Und auch nur dann, wenn Sie Logik oder Dynamik brauchen, macht es Sinn, überhaupt so mit dem Style-Objekt zu arbeiten. Dann haben wir natürlich noch den reinen DHTML-Effekt. Denn Sie sehen hier, dass ich onmouseover und onmouseout benutze. Hier kann ich natürlich nicht nur mit Hover-Effekten arbeiten, sondern Sie haben on click zur Verfügung. Was auch immer Sie an Event-Handlern kennen, darauf können Sie reagieren, und dann ist es eben die Kunst, im Inneren über das Style-Objekt bestimmte Dinge zu tun. Ich muss nicht das gleiche Objekt ansprechen, das eine Aktion auslöst. Ich könnte bspw. auf einen Button klicken und dann die Größe von einem Bild verändern. Von daher habe ich hier eine viel höhere Flexibilität. Sie haben jetzt also in diesem Video diese Grundzüge der Idee von DHTML kennengelernt. Diese basieren im Wesentlichen darauf, dass man das Style-Objekt von Elementen der Webseite verändert. Aber eigentlich ist DHTML alles, was die Webseite in irgendeiner Form verändert, nachdem sie bereits geladen war. Das geht im Grunde sogar so weit, dass man auch neue Texte, die in einer Webseite angezeigt werden, im Grunde als DHTML-Effekt verstehen kann.

JavaScript lernen

Legen Sie los mit der Programmierung von beeindruckenden Webseiten und machen Sie sich mit den Grundstrukturen von JavaScript, Objekten und insbesondere dem DOM-Konzept vertraut.

3 Std. 6 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

DVD oder Online-Training: Was ist der Unterschied?

 

Inhaltlich sind beide Trainings absolut gleich. Der Unterschied liegt bei den Nutzungsmöglichkeiten und im Vertriebsweg.

 

Beim Training auf DVD erhalten Sie eine Box mit allen Inhalten und einem gedruckten Bonusmagazin.

Die Bezahlung erfolgt bequem per Rechnung.

 

Das Online-Training ist sofort nach dem Kauf verfügbar, jederzeit und an jedem Ort. Sie brauchen nur eine Online-Verbindung und einen gängigen Webbrowser. Wenn Sie das Training herunterladen, steht es Ihnen auf Ihrem Computer auch offline zur Verfügung.

Die Bezahlung erfolgt per Kreditkarte, Paypal oder sofortüberweisung.de (nicht in allen Ländern verfügbar).

 

Wir wünschen Ihnen viel Freude mit dem Video-Training Ihrer Wahl – ob Online oder auf DVD.

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!