02 JavaScript und HTML: Bilder und Gestaltung verändern

Orientierung

Warum ist das wichtig?

Eine interaktive Webseite kann mehr als neue Texte anzeigen. JavaScript kann beispielsweise Bilder austauschen oder die Gestaltung eines Elements verändern. So kann dieselbe Infokarte Berlin am Tag und bei Nacht zeigen.

Berlin am Tag

Was kannst du am Ende?

Du kannst

  • die Bildquelle eines Bildes austauschen,
  • CSS-Eigenschaften mit JavaScript verändern und
  • mehrere Befehle in einer Funktion ausführen.

Erarbeitung

Theorie

Zum Nachlesen

JavaScript findet ein HTML-Element weiterhin über seine ID. Hinter dem gefundenen Element wird angegeben, was verändert werden soll.

Einen Text kennst du bereits:

javascript
document.getElementById("titel").textContent = "Berlin bei Nacht";

Bei einem Bild kann JavaScript den Wert von `src` verändern:

javascript
document.getElementById("stadtbild").src = "ab02_berlin_nacht.png";

`src` kennst du als Attribut eines Bildes aus HTML. Es gibt an, aus welcher Datei das Bild geladen wird. Ändert JavaScript diesen Wert, zeigt der Browser ein anderes Bild an.

Auch CSS-Eigenschaften können verändert werden. Sie stehen hinter `.style`. Aus der CSS-Eigenschaft `background-color` wird in JavaScript `backgroundColor`:

javascript
document.getElementById("infokarte").style.backgroundColor = "midnightblue";

Zusammengesetzte CSS-Namen werden in JavaScript ohne Bindestrich geschrieben. Das zweite Wort beginnt mit einem Großbuchstaben:

  • `background-color` wird zu `backgroundColor`
  • `font-size` wird zu `fontSize`
  • `border-color` wird zu `borderColor`

Eine Funktion kann mehrere Befehle enthalten:

javascript
function zeigeNacht() { document.getElementById("titel").textContent = "Berlin bei Nacht"; document.getElementById("stadtbild").src = "ab02_berlin_nacht.png"; document.getElementById("infokarte").style.backgroundColor = "midnightblue"; document.getElementById("infokarte").style.color = "white"; }

Beim Aufruf arbeitet JavaScript die Befehle von oben nach unten ab. Variablen, Bedingungen oder Schleifen sind dafür noch nicht erforderlich.

Grundlagen üben

Entpacke das Archiv mit HTML- und Bilddateien und speichere den Inhalt in deinem Arbeitsverzeichnis. Öffne die HTML-Datei. Probiere die Buttons aus und untersuche anschließend den Quelltext.

  • Ordne jeden Befehl der Funktion `zeigeNacht()` einer sichtbaren Änderung zu. Welche Zeile verändert
- den Titel, - das Bild, - den Infotext, - den Hintergrund und - die Schriftfarbe?
  • Die Funktion `zeigeTag()` ist noch nicht vollständig. Ergänze den fehlenden Befehl, sodass auch der Infotext wieder zur Tagansicht passt.
  • Verändere die Farbe der Nachtansicht. Verwende einen CSS-Farbnamen oder einen Hexadezimalwert, den du bereits aus CSS kennst.
  • Ergänze in beiden Funktionen einen Befehl für die Rahmenfarbe der Infokarte:
javascript
document.getElementById("infokarte").style.borderColor = "deine Farbe";
  • Der Alternativtext eines Bildes soll immer zum Bild passen. Ergänze in `zeigeTag()` und `zeigeNacht()` jeweils einen Befehl nach diesem Muster:
javascript
document.getElementById("stadtbild").alt = "Berlin bei ...";
  • Ergänze einen Button „Nur Titel ändern“. Lege dafür eine neue Funktion an, die ausschließlich den Titel verändert.
  • Schreibe vor dem Ausprobieren auf, was diese Funktion sichtbar verändern würde:
javascript
function experiment() { document.getElementById("titel").textContent = "Ein Abend in Berlin"; document.getElementById("infokarte").style.color = "gold"; document.getElementById("infotext").style.fontSize = "24px"; }

Füge die Funktion und einen passenden Button danach in die App ein und überprüfe deine Vorhersage.

Aufgaben zur Fehlersuche

Verbessere die fehlerhaften Befehle. Nutze bei Bedarf die funktionierende App als Vergleich.

Aufgabe 1
Fehlersuche
javascript
document.getElementByID("stadtbild").src = "ab02_berlin_nacht.png";
Aufgabe 2
Fehlersuche
javascript
document.getElementById("infokarte").style.background-color = "blue";
Aufgabe 3
Fehlersuche
javascript
document.getElementById("titel").text = "Berlin bei Nacht";
Aufgabe 4
Fehlersuche
javascript
document.getElementById("stadtbild").src = ab02_berlin_tag.png;
Aufgabe 5
Eine Funktion läuft ohne Fehlermeldung durch. Trotzdem bleibt der Hintergrund unverändert. Im HTML heißt die ID `infokarte`, im JavaScript steht `infoKarte`. Erkläre die Ursache möglichst genau.

Weitere Aufgaben

Aufgabe 6
Ergänze eine Funktion `zeigeSonnenuntergang()`. Du darfst dafür das Nachtbild verwenden, sollst aber eigene Texte und Farben wählen.
Aufgabe 7
Lass die Funktion zusätzlich die Breite des Bildes ändern:
javascript
document.getElementById("stadtbild").style.width = "80%";

Ergänze in den anderen Funktionen einen passenden Befehl, der die ursprüngliche Breite wiederherstellt.

Aufgabe 8
Ergänze unter dem Bild eine Bildunterschrift mit eigener ID. Passe sie in der Tag- und Nachtfunktion an.
Aufgabe 9
Verändere die Beschriftung des Nacht-Buttons, sobald die Nachtansicht aktiviert wurde. Gib dem Button dazu eine ID.
Aufgabe 10
Entwickle eine Funktion `setzeAllesZurueck()`. Sie soll Titel, Bild, Alternativtext, Information, Farben, Rahmen und Schriftgröße in den Ausgangszustand zurückversetzen.

Zusammenfassung

Was musst du wissen und können?

Nach `getElementById(...)` gibst du an, welche Eigenschaft verändert wird:

  • `.textContent` verändert Text,
  • `.src` verändert die Bildquelle,
  • `.alt` verändert den Alternativtext und
  • `.style.eigenschaft` verändert die Gestaltung.

Eine Funktion kann mehrere Befehle enthalten. Beim Aufruf werden diese Befehle nacheinander ausgeführt.

Was ist der nächste Schritt?

Bisher wurden die Funktionen durch einen Klick gestartet. In der nächsten Lektion lernst du weitere Ereignisse kennen und vervollständigst die interaktive Infokarte.