Orientierung
Warum ist das wichtig?
In den letzten drei Lektionen hast du viele neue Schreibweisen
kennengelernt. In einer Prüfung musst du nicht eine komplette
Webseite auswendig entwickeln. Du sollst aber erklären, wie
HTML und JavaScript zusammenarbeiten, kurze Codestücke lesen,
Fehler finden und einfache Befehle ergänzen können.
Mit einigen typischen Prüfungsaufgaben kannst du überprüfen,
was du schon sicher beherrschst und was du noch einmal üben
solltest.
Was kannst du am Ende?
Du weißt,
- welche Inhalte für die Prüfung wichtig sind,
- wie du bei unterschiedlichen Aufgaben vorgehen kannst und
- an welchen Stellen du noch üben solltest.
Was gehört zum Prüfungsstoff?
Du solltest
- die Aufgaben von HTML, CSS und JavaScript unterscheiden,
- IDs, Ereignisse und Funktionsaufrufe erkennen,
- den Aufbau einer einfachen Funktion beschreiben,
- HTML-Elemente mit `getElementById(...)` finden,
- Text, Bildquelle, Alternativtext und Gestaltung verändern,
- kurze Codestücke vervollständigen und
- typische Schreibfehler finden können.
Variablen, Bedingungen und Schleifen gehören noch nicht zu
diesem Prüfungsstoff.
Prüfungsaufgaben mit Besprechung
Aufgabe 1: Vom Klick bis zur Veränderung
Betrachte den Code:
html
<script>
function zeigeOrt()
{
document.getElementById("ausgabe").textContent =
"Berlin";
}
</script>
<button onclick="zeigeOrt()">Ort anzeigen</button>
<p id="ausgabe">Noch kein Ort gewählt.</p>
Bearbeite die folgenden Teilaufgaben:
Aufgabe 1
Welches Ereignis startet die Reaktion?
Aufgabe 2
Welche Funktion wird aufgerufen?
Aufgabe 3
Welches HTML-Element wird verändert?
Aufgabe 4
Was ist nach dem Klick im Browser zu sehen?
Aufgabe 5
Bringe diese Schritte in die richtige Reihenfolge: Funktion ausführen – Element anklicken – Text ersetzen – Funktion aufrufen – Element über seine ID finden.
**Lösung:**
Aufgabe 6
Das Ereignis ist `onclick`, also das Anklicken des Buttons.
Aufgabe 7
Die Funktion `zeigeOrt()` wird aufgerufen.
Aufgabe 8
Verändert wird der Absatz mit der ID `ausgabe`.
Aufgabe 9
Im Absatz steht nach dem Klick `Berlin`.
Aufgabe 10
Die richtige Reihenfolge lautet: Element anklicken – Funktion aufrufen – Funktion ausführen – Element über seine ID finden – Text ersetzen.
**So kannst du vorgehen:**
Beginne beim auslösenden HTML-Element. Folge dem Namen bei
`onclick` zur gleichnamigen Funktion. Suche dort nach der ID
des Zielelements und lies zuletzt die veränderte Eigenschaft
und ihren neuen Wert ab.
Aufgabe 2: Fehler finden und erklären
Der Button soll beim Anklicken die Überschrift verändern.
Der Code enthält drei Fehler. Finde und verbessere sie.
html
<h1 id="titel">Berlin am Tag</h1>
<button onklick="zeigeNacht()">Nacht</button>
<script>
function zeigeNach()
{
document.getElementByID("titel").textContent =
"Berlin bei Nacht";
}
</script>
**Lösung:**
Aufgabe 11
`onklick` muss `onclick` heißen.
Aufgabe 12
Aufruf und Definition müssen denselben Funktionsnamen haben. Hier wird einheitlich `zeigeNacht` verwendet.
Aufgabe 13
`getElementByID` muss `getElementById` heißen.
Der verbesserte Code lautet:
html
<h1 id="titel">Berlin am Tag</h1>
<button onclick="zeigeNacht()">Nacht</button>
<script>
function zeigeNacht()
{
document.getElementById("titel").textContent =
"Berlin bei Nacht";
}
</script>
**So kannst du vorgehen:**
Prüfe bei der Fehlersuche nacheinander:
Aufgabe 14
Ist das Ereignis richtig geschrieben?
Aufgabe 15
Stimmen Funktionsaufruf und Funktionsdefinition überein?
Aufgabe 16
Stimmt die ID mit dem HTML-Code überein?
Aufgabe 17
Ist die Eigenschaft richtig geschrieben?
Aufgabe 18
Stehen Texte und Dateinamen in Anführungszeichen?
Aufgabe 3: Eine Funktion vervollständigen
Beim Aufruf von `zeigeNacht()` sollen sich Titel, Bild,
Alternativtext, Hintergrund und Schriftfarbe verändern.
Ergänze die fünf Lücken.
javascript
function zeigeNacht()
{
document.getElementById("titel").____________ =
"Berlin bei Nacht";
document.getElementById("stadtbild").____________ =
"berlin_nacht.png";
document.getElementById("stadtbild").____________ =
"Berlin bei Nacht";
document.getElementById("infokarte").style.____________ =
"midnightblue";
document.getElementById("infokarte").style.____________ =
"white";
}
**Lösung:**
javascript
function zeigeNacht()
{
document.getElementById("titel").textContent =
"Berlin bei Nacht";
document.getElementById("stadtbild").src =
"berlin_nacht.png";
document.getElementById("stadtbild").alt =
"Berlin bei Nacht";
document.getElementById("infokarte").style.backgroundColor =
"midnightblue";
document.getElementById("infokarte").style.color =
"white";
}
**Erläuterung:**
Aufgabe 19
`textContent` verändert einen Text.
Aufgabe 20
`src` legt die angezeigte Bilddatei fest.
Aufgabe 21
`alt` legt den Alternativtext fest.
Aufgabe 22
`style.backgroundColor` verändert die Hintergrundfarbe.
Aufgabe 23
`style.color` verändert die Schriftfarbe.
Achte besonders auf `backgroundColor`: Die aus CSS bekannte
Eigenschaft `background-color` wird in JavaScript ohne
Bindestrich und mit großem `C` geschrieben.
Prüfungsaufgaben zum selbstständigen Üben
Aufgabe 4: Grundwissen und Ereignisse
Löse die folgenden Aufgaben ohne die besprochenen Lösungen
abzuschreiben. Vergleiche deine Vorgehensweise anschließend
mit den Beispielen oder besprich sie mit einer anderen Person.
Aufgabe 24
Erkläre kurz, wozu ein HTML-Element eine ID benötigt.
Aufgabe 25
Erkläre den Unterschied zwischen `onmouseover` und `onmouseout`.
Aufgabe 26
Ergänze die fehlenden Ereignisse. Beim Bewegen des Mauszeigers auf das Bild soll `zeigeNacht()` aufgerufen werden. Beim Verlassen soll `zeigeTag()` aufgerufen werden.
html
<img id="stadtbild"
src="berlin_tag.png"
alt="Berlin am Tag"
____________="____________"
____________="____________">
Aufgabe 27
Kann dieselbe Funktion zusätzlich durch einen Button aufgerufen werden? Begründe deine Antwort und schreibe einen passenden Button für `zeigeNacht()` auf.
Aufgabe 5: Fehlerwerkstatt
Der folgende Code enthält sechs Fehler. Finde und verbessere
sie. Beschreibe zu jedem Fehler kurz, warum der Code so nicht
wie gewünscht funktioniert.
html
<h2 id="infotitel">Zusatzinformation</h2>
<img id="bild" src="berlin_tag.png" alt="Berlin am Tag">
<button onclick="zeigeInfos">Anzeigen</button>
<script>
function zeigeInfo()
{
document.getElementById("infoTitel").text =
"Der Berliner Fernsehturm";
document.getElementById("bild").src =
berlin_nacht.png;
document.getElementById("bild").style.border-color =
"gold";
}
</script>
Aufgabe 6: Infokarte ergänzen
Eine Infokarte besitzt diese HTML-Elemente:
html
<main id="karte">
<h1 id="titel">Berlin entdecken</h1>
<p id="infotext">Wähle eine Ansicht.</p>
<button onclick="zeigeAbend()">Abendansicht</button>
<button onclick="setzeZurueck()">Zurücksetzen</button>
</main>
Aufgabe 28
Schreibe eine vollständige Funktion `zeigeAbend()`. Sie soll
Aufgabe 29
den Titel in `Berlin am Abend` ändern,
Aufgabe 30
den Infotext in `Die Lichter der Stadt gehen an.` ändern,
Aufgabe 31
den Hintergrund der Karte dunkelblau und
Aufgabe 32
die Schrift weiß färben.
Aufgabe 33
Schreibe eine vollständige Funktion `setzeZurueck()`. Sie soll alle vier Änderungen rückgängig machen. Verwende für den ursprünglichen Hintergrund `white` und für die ursprüngliche Schriftfarbe `black`.
Aufgabe 34
Notiere in der richtigen Reihenfolge, was nach einem Klick auf „Abendansicht“ geschieht.
Zusammenfassung
Bist du vorbereitet?
Prüfe dich selbst. Du solltest ohne Hilfe
- Ereignis, Funktionsaufruf und Funktionsdefinition zuordnen,
- den Weg vom Ereignis bis zur sichtbaren Veränderung erklären,
- Fehler in Namen und Schreibweisen finden,
- kurze JavaScript-Befehle vervollständigen und
- eine einfache Funktion aus mehreren vorgegebenen Änderungen zusammensetzen können.
Wenn dir eine Aufgabe noch schwerfällt, suche in den ersten
drei Arbeitsblättern eine ähnliche Aufgabe und übe sie noch
einmal mit anderen IDs, Texten oder Farben.
Wie geht es weiter?
Auf in die Prüfung!