Orientierung
Warum ist das wichtig?
Ein Klick ist nicht das einzige Ereignis auf einer Webseite.
Ein Element kann auch reagieren, wenn der Mauszeiger darüber
bewegt wird oder es wieder verlässt. Die Verbindung zwischen
HTML und JavaScript funktioniert dabei immer nach demselben
Prinzip.
Was kannst du am Ende?
Du kannst
- `onclick`, `onmouseover` und `onmouseout` unterscheiden,
- vorhandene Funktionen mit verschiedenen Ereignissen verbinden,
- passende IDs und Funktionsnamen verwenden und
- eine unvollständige interaktive Infokarte fertigstellen.
Erarbeitung
Zum Nachlesen
Die Tag- und Nachtfunktionen aus der letzten Lektion können
durch Buttons aufgerufen werden:
html
<button onclick="zeigeTag()">Tag</button>
<button onclick="zeigeNacht()">Nacht</button>
Dieselben Funktionen können auch mit dem Bild verbunden werden:
html
<img id="stadtbild"
src="ab03_berlin_tag.png"
alt="Berlin am Tag"
onmouseover="zeigeNacht()"
onmouseout="zeigeTag()">
Die Ereignisse bedeuten:
- `onclick`: Ein Element wird angeklickt.
- `onmouseover`: Der Mauszeiger gelangt auf ein Element.
- `onmouseout`: Der Mauszeiger verlässt ein Element.
In allen drei Fällen steht beim Ereignis nur ein
Funktionsaufruf. Die Befehle bleiben im Scriptbereich.
JavaScript muss nicht wissen, welches Ereignis eine Funktion
gestartet hat. `zeigeNacht()` führt immer dieselben Befehle
aus – egal, ob sie durch einen Klick oder eine Mausbewegung
aufgerufen wurde.
Der bekannte Ablauf bleibt also erhalten:
**Ereignis → Funktionsaufruf → Funktion → Veränderung**
Funktionen und IDs sollten verständliche Namen haben. Namen
wie `zeigeNacht`, `stadtbild` oder `infotext` helfen beim Lesen
und bei der Fehlersuche.
Aufgaben zu den Grundlagen
Öffne die unvollständige Berlin-Infokarte.
Kommentare mit `TODO` zeigen Stellen, an denen etwas fehlt.
Die Bilder hast du schon vom letzten Kapitel.
Aufgabe 1
Probiere zuerst die vorhandene Webseite aus. Halte in einer kleinen Tabelle fest, was bereits funktioniert und was noch nicht funktioniert.
Aufgabe 2
Ergänze beim Bild die beiden Ereignisse so, dass beim Darüberfahren die Nachtansicht und beim Verlassen wieder die Tagansicht erscheint.
Aufgabe 3
Der Button „Nacht“ ruft eine nicht vorhandene Funktion auf. Verbessere den Funktionsaufruf.
Aufgabe 4
Ergänze den fehlenden Button für die Tagansicht. Verwende die bereits vorhandene Funktion.
Aufgabe 5
Vervollständige `zeigeZusatzinfo()`. Beim Klick auf „Mehr erfahren“ soll dieser Text erscheinen:
`Der Berliner Fernsehturm ist 368 Meter hoch.`
Aufgabe 6
Ergänze einen Button „Zurücksetzen“, der die Funktion `setzeAllesZurueck()` aufruft. Vervollständige die Funktion so, dass
- die Tagansicht erscheint,
- der ursprüngliche Infotext erscheint und
- der Zusatztext wieder zurückgesetzt wird.
Aufgabe 7
Untersuche: Funktionieren `onclick`, `onmouseover` und `onmouseout` nur bei Buttons und Bildern? Ergänze eines der Ereignisse testweise bei einer Überschrift oder einem Absatz. Notiere dein Ergebnis.
Aufgabe 8
Erkläre den Weg vom Bewegen des Mauszeigers auf das Bild bis zum sichtbaren Bildwechsel in vier Schritten.
Aufgaben zur Fehlersuche
Ordne jeden Fehler zuerst einer Kategorie zu:
- Ereignis falsch geschrieben,
- Funktion nicht gefunden,
- Element nicht gefunden,
- Eigenschaft falsch geschrieben oder
- Wert ungeeignet.
Verbessere anschließend den Code.
html
<img onmouseover="zeigeNacht">
html
<button onclick="zeigeInfo()">Mehr erfahren</button>
Im Scriptbereich heißt die Funktion `zeigeZusatzinfo()`.
javascript
document.getElementById("stadtBild").src =
"ab03_berlin_nacht.png";
Das Bild besitzt die ID `stadtbild`.
javascript
document.getElementById("karte").style.backgroundcolor =
"navy";
html
<p onmausout="zeigeTag()">Berlin</p>
Zusammenhängende Aufgabe ohne KI
Vervollständige die Infokarte ohne Hilfe einer KI. Nutze deine
bisherigen Lösungen und diese Checkliste:
- Die Webseite besitzt Buttons für Tag und Nacht.
- Beim Überfahren des Bildes erscheint die Nachtansicht.
- Beim Verlassen des Bildes erscheint die Tagansicht.
- Bild, Alternativtext, Titel, Infotext und Farben passen
jeweils zusammen.
- Ein Button zeigt eine Zusatzinformation an.
- Ein Button stellt den gesamten Ausgangszustand wieder her.
- Bei `onclick`, `onmouseover` und `onmouseout` stehen nur
Funktionsaufrufe.
- Alle JavaScript-Befehle stehen im Scriptbereich.
Vergleiche dein Ergebnis danach mit einer anderen Person oder
lasse es von einer KI prüfen. Notiere gefundene Fehler und wie
du sie behoben hast.
Weitere Aufgaben
Aufgabe 14
Füge eine zweite Zusatzinformation mit eigener ID und einem eigenen Button hinzu.
Aufgabe 15
Gestalte den Button „Mehr erfahren“ beim Darüberfahren farbig und setze ihn beim Verlassen zurück. Verwende dafür zwei neue Funktionen.
Aufgabe 16
Verwende dieselbe Funktion einmal bei `onclick` und einmal bei `onmouseover`. Beschreibe, was gleich bleibt und was sich unterscheidet.
Aufgabe 17
Ergänze eine kurze Bedienungsanleitung direkt auf der Webseite. Sie soll erklären, was beim Klicken und beim Überfahren des Bildes geschieht.
Aufgabe 18
Entferne absichtlich bei einem Funktionsaufruf die runden Klammern. Beobachte die Wirkung, stelle den funktionierenden Zustand wieder her und formuliere eine Fehlermeldung, die einem Mitschüler helfen würde.
Aufgabe 19
Schreibe eine kurze Anleitung mit der Überschrift „So verbindest du HTML und JavaScript“. Verwende dabei die Begriffe Ereignis, Funktion, ID und Eigenschaft.
Zusammenfassung
Was musst du wissen und können?
HTML enthält die sichtbaren Elemente. IDs geben diesen
Elementen eindeutige Namen. Ereignisse wie `onclick`,
`onmouseover` und `onmouseout` rufen Funktionen auf.
Die Funktionen enthalten JavaScript-Befehle. Mit
`document.getElementById(...)` findet JavaScript ein Element.
Danach kann es beispielsweise Text, Bildquelle oder Gestaltung
verändern.
Was ist der nächste Schritt?
Die Funktionen führen bisher bei jedem Aufruf dieselben
Befehle aus. Im nächsten Kapitel lernst du richtig zu
programmieren: Variablen speichern Werte und Bedingungen
entscheiden, welche Befehle ausgeführt werden. Schleifen
folgen später.