Der Browser-Speicher localStorage ist nicht verfügbar. Entweder unterstützt dein Browser ihn nicht oder du hast ihn deaktiviert oder er ist voll. Ohne localStorage werden deine Lösungen nicht gespeichert.
Dynamische Webseiten
Webseiten basieren auf HTML, der Hypertext Markup Language. HTML-Seiten bestehen aus Text und werden
durch sogenannte Tags strukturiert. Tags stellen meist einen rechteckigen Bereich der Webseite dar.
Diese Bereiche können mit CSS, den Cascading Style Sheets, formatiert werden. Mit CSS kann man die
Position, die Größe, die Farbe und vieles mehr der einzelnen Tags festlegen. Eine Einführung in HTML
und CSS findest du auf SELFHTML.
Hier lernst du exemplarisch, wie man Webseiten mit Hilfe von JavaScript verändern kann. Solche Webseiten nennt man auch dynamische Webseiten. Ein gutes Beispiel für eine dynamische Webseite ist JS Hero. Sind auf einer Seite alle Tests grün, wechselt die Farbe der oberen Titelleiste von rot auf grün. Das geschiet mit Hilfe von JavaScript. Einen solchen Farbwechsel wollen wir jetzt programmieren.
Um einzelne Tags einer Webseite verändern zu können, benötigt JavaScript eine gesonderte Bibliothek, das Document Object Model (DOM). Diese Bibliothek steht in jedem Browser über das
Hier lernst du exemplarisch, wie man Webseiten mit Hilfe von JavaScript verändern kann. Solche Webseiten nennt man auch dynamische Webseiten. Ein gutes Beispiel für eine dynamische Webseite ist JS Hero. Sind auf einer Seite alle Tests grün, wechselt die Farbe der oberen Titelleiste von rot auf grün. Das geschiet mit Hilfe von JavaScript. Einen solchen Farbwechsel wollen wir jetzt programmieren.
Um einzelne Tags einer Webseite verändern zu können, benötigt JavaScript eine gesonderte Bibliothek, das Document Object Model (DOM). Diese Bibliothek steht in jedem Browser über das
document
Objekt zur Verfügung. Um auf ein Tag, auch HTML-Element genannt, zugreifen zu können,
muss man es identifizieren. Das geht am besten, wenn man dem Tag im HTML Code eine ID, einen
Identifikator, zuweist.
Hat ein Tag die ID content
, so sieht der Zugriff wie folgt aus:
let elm = document.getElementById("content");
document
besitzt die Methode getElementById
. Übergibt man dieser Methode eine ID,
so liefert sie ein Objekt zurück, dass das entsprechende HTML-Element repräsentiert.
Dieses Objekt besitzt nun Eigenschaften und Methoden, mit denen man das HTML-Element verändern kann.
Eine dieser Eigenschaften ist style
. Es ist ein Objekt, dass alle CSS-Eigenschaften
des HTML-Elements repräsentiert. Mit diesem Objekt können wir nun die Hintergrundfarbe eines HTML-Elements
verändern:
let elm = document.getElementById("content");
elm.style.backgroundColor = 'blue';
Im ersten Schritt holen wir uns mit der bekannten Methode getElementById
das HTML-Element.
Im zweiten Schritt setzen wir die Eigenschaft backgroundColor
des style
-Objekts
auf 'blue'
. Das HTML-Element wir augenblicklich blau.Aufgabe
Unterhalb der Aufgabe befindet sich ein grauer Streifen. Der Streifen ist ein HTML-Element
mit der ID
fixme
. Setze die Hintergrundfarbe dieses Streifens auf orange.
+ Tipp
Setze
backgroundColor
auf 'orange'
.
+ Lösung
let elm = document.getElementById('fixme');
elm.style.backgroundColor = 'orange';