JavaScript Grundkurs

Das Konzept der Objektfelder

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es gibt im Rahmen des DOM-Konzepts Objektfelder, die Arrays mit DOM-Objekten eines spezifischen Typs als Inhalt haben. Beispiele für solche Objektfelder sind forms und images und diese manipulieren wir im Film auf der Beispiel-Webseite.
05:25

Transkript

Im Rahmen des DOM Konzeptes gibt es auch sogenannte Objektfelder. Das sind RS. Die Besonderheit dieser RS ist der Inhalt. Sie enthalten Bestandteile der Website und sie werden standardmäßig vom Browser zur Verfügung gestellt, als Unterobjekte des Objekts Document, welches die Webseite selbst repräsentiert. Es gibt nicht für alle Elemente in der Webseite solche Objektfelder, aber für einige, beispielsweise Formulare oder Bilder, und die Namen der Objektfelder sind identisch, wie die Namen der Objekte, die Sie enthalten, nur mit einem S dran, wenn also ein Formular über Form zu Verfügung steht, werden die Objektfelder Forms heißen. Wenn ein Bild Image heißt, werden die Objektfilter Images heißen. Betrachten wir mal dieses Beispiel, ich habe hier was vorbereitet. Ich habe eine Webseite in der zwei Bilder sich drinnen befinden. Diese habe ich einfach mit HTML in die Seite geschrieben. Habe hier ein Unterverzeichnis Images und da sind verschiedene Bilder drin. Zwei Bilder vom Typ PNG und drei Bilder vom Typ JPG. Ich habe hier eine Javascript-Funktion vorbereitet, die zurzeit nur zwei Zufallswerte berechnet. Ich benutze dazu Math.random. Das bietet eine Zufallszahl zwischen 0 und 1. Wir erkennen diese Klassenmethode. Exklusive der 1 x 2 gibt also einen Wert zwischen 0 und 22 exklusive und dann runde ich das ab. Math.floor ist eine weitere Klassenmethode die abrundet und dann addiere ich den Wert 1 drauf. Das heißt ich bekomme entweder 1 oder 2 als Wert. Bei jedem Aufruf der Funktion wird das zufällig berechnet. Vollkommen analog einen zweiten Wert, nur der wird zwischen 1 und 3 sein. Vielleicht können Sie sich vorstellen, dass ich daraus die Auswahl meines Bildes treffen möchte. Nun ist es eben so, dass dieses Objektfeld Images Zugang zu allen Bildern der Website gibt. Es ist Document unterordnet wie ich gesagt hatte und dementsprechend schreiben Sie document.images hin. NRE mit Objekten als Inhalt und ein RE ist nur indiziert. Mit der Null als würde ich als das erste Bild ansprechen ,das wäre dieses hier. Das schöne an Dom Objekten ist, dass sie überwiegend Elemente in einer Webseite repräsentieren und damit können sich die Eigenschaftenmethoden dieses Objektes sehr leicht herleiten aus den Attributen, die man auch bei HTML setzen kann, zumindest ein Großteil der Eigenschaften. Und wenn es hier für ein imagetech ein Atribut Source gibt, dann gibt es hier auch eine Eingenschaftsource und darüber können Sie einen neuen URL zuweisen, document.images[0].source gibt den Zugriff auf die Sourceeigenschaft von diesem Bild Objekt. Und hier kann ich dann per Stringverkettung dynamisch mir Bilder zusammensetzen, beispielsweise so; ich gebe das Verzeichnis Images an, da befinden sich die Bilder. Alle meine Bilderdateien beginnen mit dem Buchstaben b, das ist nicht zufällig gewählt. Auch nicht der Index, den ich da nehme, denn der ist numerisch und den kann ich mit diesen Z1 darstellen. Jetzt haben wir eine Verkettung von einem String und einer Zahl. Der String frisst die Zahl, also wird daraus entweder B1 oder B2 und dann haue ich noch die Dateierweiterung drauf. In meinem Fall ist das jetzt .PNG und das zweite Bild kann ich vollkommen analog manipulieren. Ich muss dann hier nur Images von 1 nehmen. Hier dann entsprechend C2 und die Dateierweiterung ist nicht mehr PNG sondern JPG, so wie ich das hier gewählt habe. Jetzt ist es so, dass diese vorbereitete Funktion tausche und zwar immer dann, wenn ich auf das erste Bild klicken oder mit dem Mauszeiger drübergehe. Das sieht dann so aus. Ich gehe mit dem Mauszeiger über dieses Bild drüber, zum Teil passiert etwas. Die beiden Bilder sind unabhängig. Ich klicke hier drauf, ich klicke hier wieder drauf und Sie sehen diese Bilder werden nach zufälligen Kriterien und wie gesagt unabhängig voneinander ausgetauscht. Ich habe also über diese objektfelder Zugang zu einzelnen Bestandteilen der Webseite. Wohlgemerkt es sind nur ausgewählte Bestandteile und diese Objektfelder wurden durch ein neues Konzept, das Node Objekt, irgendwann mal erweitert. Aber diese Technik steht immer noch zu Verfügung. Über Objektfelder haben Sie Zugang zu allen anderen Webseiten, zu ein Java-Applets, zu allen Formularen, samt ihren Elementen darinnen zu allen Frames, zu allen Bildern, zu allen Links, zu allen Minetypes und zu allen Plugins. Und Bedeutungen sind der Praxis eigentlich nur noch die Formulare, die Frames und die Bilder. Sie sollten sich als Faciet von diesem Film merken, dass es diese Objektfilter gibt, auch wenn Sie wahrscheinlich in der Praxis später neuere Techniken, eben besagtes Nodeobjekt benutzen werden.

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!