JavaScript lernen

Zugriff auf Eigenschaften

Testen Sie unsere 1958 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
"innerHTML" bietet universellen Zugriff auf DOM-Elemente, die Textinhalte bereitstellen, die Eigenschaft "value" auf Benutzereingaben in einem Webformular. Weitere Eigenschaften stehen über übliche Namen der HTML-Attribute zur Verfügung.
06:50

Transkript

In diesem Video erfahren Sie alles, was Sie wissen müssen, um die wichtigsten Aktionen im Rahmen einer Webseite durchführen zu können, wenn Sie auf Eigenschaften von DOM-Elementen zugreifen wollen. Denn es sind gar nicht so viele Eigenschaften, die Sie kennen müssen, um wirklich die meisten Situationen programmieren zu können, die man so im Rahmen einer Webseite vorfindet. Betrachten wir mal dieses Beispiel: Ich bewege mich mit dem Mauszeiger über das eine Bild rüber und es vergrößert sich. Ich gehe raus und es wird wieder kleiner. Ich gehe wieder rein, ich klicke auf das Bild und sehe jetzt hier eine Information. Ich gehe raus und das Bild wird wieder kleiner und die Information verschwindet. Oder ich klicke auf dieses Bild und ich sehe hier auch eine ganze Reihe von Informationen. Ich bewege den Mauszeiger raus aus dem Bildbereich und diese Information verschwindet. Ich klicke jetzt hier auf diesen Button und Sie sehen hier den Text, der hier oben in der Überschrift steht. Oder ich habe hier ein Eingabeformular. Ich trage hier etwas ein. Ich klicke auf diesen Button und dieser Text ist hier in der Webseite zu sehen. Tatsächlich wollen wir in diesem Video all diese Techniken behandeln. Die Grundidee dahinter ist im Wesentlichen, dass man einen Knoten selektiert und dann weiß, welche Eigenschaften wofür stehen. Das ist nicht sonderlich viel. Hier sehen Sie die zu Grunde liegende Webseite. Das sind im Wesentlichen einige Bilder, einige Divs. Hier haben wir ein Formular mit einem Eingabefeld und hier haben wir einige Schaltflächen, 2 Stück, genauer genommen. Des Weiteren sehen Sie hier eine intensive Verwendung von HTML-Eventhändlern, mit denen wir Funktionen aufrufen: "On mouse over", "On mouse out", "On click." Sie können natürlich bei jedem Element beliebige Eventhändler notieren, solange diese sich nicht in die Quere kommen. Sehr ungünstig ist "On click" und "On doubleclick" bei einem Element. Aber "On mouse over", "On mouse out" und "Click" kollidiert ja nicht. Hier sehen Sie auch ein "On click", "On mouse out." Hier auf dem Button haben wir ein "On click" und hier haben wir auch ein "On click." Die jeweiligen Funktionen, die hier aufgerufen werden, bewirken genau das, was wir eben gerade gesehen haben. Zum Beispiel sehen Sie hier eine Funktion, "Größer." Das ist die Funktion, die das Vergrößern des Bildes bewirkt. Also diesen Effekt, das Vergrößern. Das machen wir mit dieser Zeile hier. Was passiert hier denn genau? Ich benutze eine der verfügbaren Selek- tionsmöglichkeiten für ein DOM-Objekt, nämlich das DOM-Objekt des Bildes. Hier benutze ich "Document get element by ID." Dieses Bild hat die ID B1. "Poked with". Und jetzt mach ich hier ein Plus = 20. Das heißt, ich erhöhe die Breite des Bildes um 20. Der entscheidende Punkt ist: Woher weiß ich denn, dass es diese Eigenschaft, with, gibt? Die Antwort ist elementar. Sämtliche mögliche HTML-Attribute gibt es auch als Eigenschaften in einem DOM-Objekt. Ein Bild hat also entsprechende "with", "high", jetzt sind wir hier, "src", für "Source", und was es sonst noch alles gibt. Vollkommen analog gilt das für alle anderen Elemente in der Webseite. Sie können die Attribute von HTML als Eigenschaften notieren. Natürlich vollständig kleingeschrieben. Das ist an XHTML orientiert. Aber ansonsten können Sie Ihr Wissen aus HTML sofort übernehmen und damit sämtliche Eigenschaften manipulieren, die Sie eventuell kennen. Diese Größenveränderungen, als auch hier diese Abfrage der Eigenschaften von diesem Bild, basieren genau darauf. Nur, mit dieser Information können Sie noch nicht sämtliche Effekte erklären, die wir hier haben. Aber Sie sehen hier eine Eigenschaft, innerHTML. InnnerHTML ist im DOM-Konzept eine Eigenschaft, um an den Inhalt sämtlicher Elemente in der Webseite zu kommen, die einen textorientierten, einen HTML-orientierten Inhalt haben, so wie Überschriften beispielsweise, Div-Container, Absätze. Alle werden über innerHTML ihren Inhalt zugänglich machen. In dem Moment, wo Sie hier einen Leer-String notieren, leeren Sie den Inhalt. Indem Sie irgendetwas reinschreiben, füllen Sie diesen Bereich mit dem entsprechenden Inhalt. Sie können dort auch HTML-Tags reinschreiben, um beispielsweise bestimmte Passagen kursiv zu machen. Oder Sie können Hyperlinks reinschreiben, was auch immer. InnerHTML ist der zentrale Schlüssel. Für die, die es interessiert: Interessanterweise ist innerHTML erst mit HTML5 standardisiert worden, obwohl man es seit etwa 2003/ 2004 bereits konsequent nutzen kann, in fast allen interessanten Browsern. Nun stellt sich noch die Frage, wie Sie auf Formulare zugreifen können. Die Antwort habe ich schon gegeben: Wenn ich hier etwas reinschreibe und hier wird das ausgegeben. Das Ausgeben erfolgt mit innerHTML, das sollte jetzt klar sein. Aber auch die Abfrage der Formulareingabe, "Value"! "Value" ist standardmäßig bei einem Formularelement, wie einem Input-Tag der Wert. Wie ich schon gesagt habe, können Sie die klassischen HTML-Attribute direkt verwenden. Mit "document get elements by tag name" von Input von 0 selektiere ich das erste Eingabefeld. Dessen Inhalt erhalte ich über "Value". Von daher haben Sie in diesem Video gesehen, dass die eigentlichen Manipulationen in einer Webseite im Grunde nur darauf basieren, dass Sie die Elemente ansprechen können (über die geeigneten DOM-Methoden), in der Regel "get element by ID" oder "get elements by tag name" und dann wissen: Welche HTML-Attribute hat ein selektiertes Element? Dazu gibt es noch einige Erweiterungen, die so nicht als HTML-Attribut zur Verfügung stehen. Die wichtigste davon ist innerHTML. Damit kommen Sie an den Inhalt von text- oder HTML-orientierten Elementen wie Überschriften, Absätzen, Div-Containern etc.

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!