Aufgabenblock — AFB III
Begründen statt nur ausführen: Fehler erklären, Varianten vergleichen und Entscheidungen treffen. Formuliere deine Antwort erst selbst in ganzen Sätzen, bevor du die Musterlösung aufklappst.
Begründe in 3–4 Sätzen, warum man für die Gestaltung von 20 gleich aussehenden Produktkarten eine Klasse und keine ID verwendet.
Hinweis: Denke daran, wie oft eine ID auf einer Seite vorkommen darf.
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: Eine ID darf auf einer Seite nur an genau einem Element stehen, eine Klasse dagegen an beliebig vielen. Mit class="karte" und einer einzigen Regel .karte { … } sehen alle 20 Karten gleich aus. Mit IDs bräuchte man 20 verschiedene Namen und 20 Regeln. Ändert sich die Gestaltung, muss man mit der Klasse nur eine Stelle anpassen.
Erkläre, warum das <script>-Element für ein Programm, das Elemente der Seite ändert, am Ende des body steht.
Hinweis: Der Browser liest die Datei von oben nach unten.
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: Der Browser baut die Seite von oben nach unten auf und führt ein Script sofort aus, wenn er es erreicht. Steht es im head, gibt es die Elemente des body noch nicht; querySelector liefert dann null, und die nächste Zeile bricht ab. Am Ende des body sind alle Elemente schon geladen und können gefunden werden.
Erkläre, warum "5" + 3 den Wert "53", "5" - 3 aber den Wert 2 hat.
Hinweis: Frage dich, welche Bedeutungen + und − haben können.
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: Das Zeichen + hat in JavaScript zwei Bedeutungen: Addieren und Texte aneinanderhängen. Ist einer der Werte ein Text, wird verkettet: "5" + 3 ergibt „53“. − kann nur rechnen; deshalb wandelt JavaScript den Text "5" automatisch in die Zahl 5 um und rechnet 5 − 3 = 2. Um sicherzugehen, wandelt man Eingaben mit Number um.
Beurteile die Aussage: „Ob ich in einer Bedingung = oder === schreibe, ist egal — beides prüft, ob zwei Werte gleich sind.“
Hinweis: Teste gedanklich if (x = 5) mit x = 3.
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: Die Aussage ist falsch. = ist eine Zuweisung: if (x = 5) speichert 5 in x, und die Bedingung gilt dann immer als erfüllt — auch wenn x vorher 3 war. === vergleicht Wert und Typ und liefert true oder false, z. B. ist 5 === "5" false. In Bedingungen gehört also immer ===.
Ein Programm vergibt ab 90 Punkten „Gold“ und ab 70 Punkten „Silber“. Begründe mit einem Beispiel, warum punkte >= 90 vor punkte >= 70 geprüft werden muss.
Hinweis: Wähle eine Punktzahl, die beide Bedingungen erfüllt.
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: In einer if-else-if-Kette läuft nur der Block der ersten wahren Bedingung. Bei 95 Punkten sind beide Bedingungen wahr. Steht >= 70 oben, erhält man „Silber“, und der Gold-Zweig wird nie erreicht. Die strengere Bedingung muss deshalb zuerst geprüft werden.
Vergleiche for- und while-Schleife und gib für jede eine passende Situation an.
Hinweis: Weiß man vorher, wie oft wiederholt wird?
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: Beide wiederholen einen Block, solange eine Bedingung gilt. Die for-Schleife fasst Start, Bedingung und Schritt in einer Zeile zusammen; sie passt, wenn die Anzahl der Runden feststeht, z. B. um jedes Element eines Arrays zu besuchen. Die while-Schleife passt, wenn man die Anzahl vorher nicht kennt, z. B. „halbiere, bis der Wert unter 10 liegt“ oder „frage erneut, bis die Eingabe gültig ist“.
Jona sagt: „Meine Funktion preis(anzahl) gibt den Preis doch mit console.log aus — return brauche ich nicht.“ Nimm Stellung.
Hinweis: Was passiert, wenn man mit dem Preis weiterrechnen will?
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: console.log zeigt den Wert nur in der Konsole an. Der Aufruf preis(3) liefert dann undefined; man kann ihn weder speichern noch addieren oder vergleichen — preis(3) + 2 ergäbe NaN. Mit return ist der Aufruf selbst der Preis und lässt sich überall weiterverwenden. Soll die Funktion mehr als eine einmalige Anzeige leisten, braucht sie also return.
Erläutere den Unterschied zwischen querySelector und querySelectorAll und nenne je ein Beispiel, in dem man die Methode braucht.
Hinweis: Denke an „die Überschrift“ und „alle Preise“.
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: querySelector liefert das erste passende Element (oder null), z. B. um die eine Überschrift #titel zu ändern. querySelectorAll liefert eine Liste aller passenden Elemente; man durchläuft sie mit einer Schleife, z. B. um alle Elemente mit der Klasse preis rot zu färben. Wer nur querySelector nutzt, ändert immer nur das erste Element.
Erkläre, warum ein Klickzähler nur funktioniert, wenn let n = 0; außerhalb der Funktion steht, die bei jedem Klick läuft.
Hinweis: Was passiert mit einer lokalen Variablen am Ende eines Aufrufs?
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: Steht let n = 0; in der Funktion, wird bei jedem Klick eine neue Variable mit dem Wert 0 angelegt, um 1 erhöht und am Ende des Aufrufs vergessen — die Anzeige bleibt bei 1. Steht sie außerhalb, gibt es nur eine Variable für das ganze Programm; jeder Klick erhöht ihren bisherigen Wert. Der Zustand muss den Aufruf überleben.
Ein Formular fragt das Alter ab (ganze Zahl von 1 bis 120). Entwickle fünf Testeingaben, mit denen du die Prüfung des Programms sinnvoll testest, und begründe die Auswahl.
Hinweis: Denke an Grenzen, Leereingaben und Tippfehler.
Musterlösung anzeigen (zählt als erledigt)
Musterlösung: Zum Beispiel: „30“ (normaler Fall, muss funktionieren), „1“ und „120“ (Grenzen, müssen noch gelten), „0“ oder „121“ (knapp außerhalb, müssen abgelehnt werden), „“ (leeres Feld, Number("") ist 0) und „abc“ oder „2,5“ (keine gültige Zahl, NaN). Grenzwerte und Leereingaben sind die typischen Stellen, an denen Prüfungen versagen.