Interaktive Webseite bauen: Übungen – Informatik Klasse 9

A1

Welche Datei?

AFB I

Für ein Quiz sind Aufgaben zu erledigen. Ordne jede der Datei zu, in der sie umgesetzt wird.

Ziehe jede Karte in den passenden Korb — oder wähle sie mit Enter aus und drücke dann die Ziffer des Korbs (0 legt sie zurück).

1index.html

2style.css

3app.js

Was da ist → HTML, wie es aussieht → CSS, was passiert → JavaScript.

Ansatz: Frage: Ist es Inhalt, Aussehen oder Verhalten?

Weiter: Alles, was auf eine Aktion reagiert, ist Verhalten.

A2

Stimmt's? — Projektarbeit

AFB I

Gib an, ob die Aussagen stimmen.

5 Aussagen nacheinander. Eine falsche Einschätzung reicht — dann startest du die Serie mit „Neue Runde“ neu.

Aussage 1 von 5

Kleine Schritte, häufiges Testen, sprechende Namen.

Ansatz: Wie werden CSS und JavaScript jeweils eingebunden?

Weiter: Was ist der Zustand eines Programms?

A3

Punktezähler

AFB I

let punkte = 0;
knopf.addEventListener("click", treffer);
function treffer() {
  punkte = punkte + 5;
  anzeige.textContent = "Punkte: " + punkte;
}

Jemand klickt viermal. Bestimme die angezeigte Punktzahl.

Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.

4 · 5 = 20. Die Anzeige lautet „Punkte: 20“.

Ansatz: Jeder Klick addiert 5.

Weiter: Die Variable steht außerhalb der Funktion und behält ihren Wert.

A4

Vom Plan zur App

AFB II

Stelle die Arbeitsschritte eines Projekts in einer sinnvollen Reihenfolge dar.

Ziehe die Karten in die richtige Reihenfolge — mit der Tastatur: ↑/↓ verschiebt, Shift+↑/↓ wechselt nur den Fokus.

1Idee skizzieren: Was soll man sehen, was soll passieren?

2HTML-Gerüst schreiben, wichtige Elemente mit id

3CSS-Datei einbinden und gestalten

4In app.js die Elemente holen

5Listener anhängen und Funktion schreiben

6Mit Konsole und Grenzfällen testen

7Erweitern, wenn alles läuft

Erst was da ist, dann wie es aussieht, dann was passiert — und zwischendurch immer testen.

Ansatz: Ohne Elemente kann JavaScript nichts finden.

Weiter: Erweiterungen kommen zuletzt.

A5

Abstimmung

AFB II

Jeder Klick auf ja soll eine Stimme zählen und anzeigen. Ergänze — zwei Wörter bleiben übrig.

Wort anklicken, dann Lücke anklicken (oder umgekehrt) — mit Tab und Enter geht es genauso. Ein Klick auf eine gefüllte Lücke legt das Wort zurück.

let stimmen = 0; ja.("click", zaehlen); function zaehlen() { stimmen = + 1; anzeige. = stimmen + " Stimmen"; }

Ereignis → Zustand ändern (stimmen + 1) → Anzeige aktualisieren (textContent).

Ansatz: Der neue Wert entsteht aus dem alten.

Weiter: Die Anzeige ist kein Eingabefeld.

A6

Fehlerbild und Ursache

AFB II

Ordne jedem Fehlerbild die wahrscheinlichste Ursache zu.

Klicke links einen Eintrag an und dann rechts den passenden — es entsteht eine Verbindungslinie. Mit der Tastatur: Enter zum Auswählen, ↑/↓ zum Wandern.

null heißt: Das gesuchte Element wurde nicht gefunden. Stille Fehler (kein Rot in der Konsole) entstehen oft durch Tippfehler in Texten wie Ereignisnamen oder Selektoren.

Ansatz: null = nichts gefunden.

Weiter: Welche Fehler melden sich in der Konsole, welche nicht?

A7

Fehlersuche: Quiz

AFB II Mix

Analysiere das Quiz-Programm — zwei Zeilen sind falsch.

Klicke genau die fehlerhaften Zeilen an — die richtigen musst du stehen lassen.

Mit = würde „Paris“ ins Feld geschrieben und die Bedingung wäre immer wahr.

Ansatz: Wann soll auswerten laufen?

Weiter: Speichern oder vergleichen?

A8

Der Warenkorb

AFB III

let summe = 0;
function kaufe(preis) {
  summe = summe + preis;
  if (summe > 20) {
    hinweis.textContent = "Versandkostenfrei!";
  }
}
kaufe(8); kaufe(7); kaufe(6);

Ermittle die Werte.

Löse die Kette Schritt für Schritt: Erst wenn ein Schritt stimmt, wird der nächste freigeschaltet. Enter prüft.

summe nach dem zweiten Aufruf: €
summe nach dem dritten Aufruf: €
So oft wird der Hinweis gesetzt: Mal

8 → 15 → 21. Erst beim dritten Aufruf ist 21 > 20. Der Zustand summe liegt außerhalb der Funktion und bleibt zwischen den Aufrufen erhalten.

Ansatz: Führe eine Tabelle mit summe.

Weiter: Die Bedingung wird bei jedem Aufruf geprüft.

A9

Farbwechsler reparieren

AFB III

Jeder Klick soll die Box in der nächsten Farbe zeigen: rot, grün, blau, dann wieder rot. Überprüfe den Code und korrigiere die fehlerhaften Zeilen.

Klicke die fehlerhaften Zeilen an — dann klappt ein Feld auf, in das du die richtige Zeile schreibst. Geprüft werden Auswahl und Korrekturen (Leerzeichen sind egal).

Bei i = 3 gibt es farben[3] nicht — zurückgesetzt werden muss, sobald i die Länge erreicht. In JavaScript heißt die Eigenschaft backgroundColor mit großem C.

Ansatz: Welcher Index ist der größte?

Weiter: CSS-Namen mit Bindestrich in camelCase.

A10

Immer 1

AFB III Trick

function klick() {
  let n = 0;
  n = n + 1;
  anzeige.textContent = n;
}
knopf.addEventListener("click", klick);

Die Anzeige bleibt nach jedem Klick bei 1. Beurteile die Aussagen.

Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.

Der Zustand muss den Aufruf überleben — also außerhalb der Funktion angelegt werden. Der Listener läuft bei jedem Klick, zeigt aber jedes Mal 0 + 1.

Ansatz: Was passiert mit n bei jedem Aufruf?

Weiter: Wo lag der Zustand in den anderen Beispielen?

Interaktive Webseite bauen

Übungsaufgaben