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 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:
var 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:
var 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.
Setze backgroundColor auf 'orange'.
var elm = document.getElementById('fixme');
elm.style.backgroundColor = 'orange';