06 Prüfungsvorbereitung

Orientierung

Was brauchst du als Basiswissen?

Für die Prüfung brauchst du die Inhalte der bisherigen Unterrichtsreihe: Ereignisse und externe JavaScript-Dateien, for-Schleifen, Arrays, switch-Verzweigungen und Animationen.

Worum geht es?

In der Prüfung werden Aufgaben aus drei Stufen zufällig ausgewählt. In Stufe 1 wird Grundwissen abgefragt. In Stufe 2 untersuchst und vervollständigst du Code. In Stufe 3 schreibst du selbst kurze Programme oder Programmteile.

Was ist das Ziel?

Du kennst die verschiedenen Aufgabenarten, kannst deine Antworten überprüfen und weißt, welche Themen du noch üben solltest.

Vorbereitung

So gehst du bei den Aufgaben vor

Lies zuerst genau, was verlangt wird. Achte bei Code besonders auf Groß- und Kleinschreibung, Klammern, Anführungszeichen und Semikolons. Verfolge bei Schleifen die ersten Durchläufe auf Papier. Prüfe bei Arrays den Startindex 0 und bei Animationen, ob ein nächstes Bild angefordert wird.

Die Lösungen der Beispiele sind manchmal nur eine mögliche Lösung. Ein anderer korrekter Lösungsweg ist ebenfalls richtig.

Stufe 1: Grundwissen

In Stufe 1 erklärst du Begriffe oder nennst einen passenden Befehl. Meist genügt eine kurze und genaue Antwort.

Beispiel 1: Worin unterscheiden sich `querySelector` und `querySelectorAll`?

Lösung: `querySelector` liefert das erste passende Element. `querySelectorAll` liefert alle passenden Elemente.

Beispiel 2: Womit beginnt der Index eines Arrays?

Lösung: Das erste Element eines Arrays hat in JavaScript den Index 0. Bei drei Elementen lauten die gültigen Indizes deshalb 0, 1 und 2.

Beispiel 3: Welche Aufgabe hat `default` in einer switch-Verzweigung?

Lösung: `default` behandelt den Fall, dass keiner der angegebenen `case`-Werte passt.

Jetzt bist du dran. Beantworte die Aufgaben ohne Hilfe:

Wie kann die externe Datei `spiel.js` in HTML eingebunden werden?
Was bedeutet `event.target` bei einem Ereignis?
Wozu verwendet man `array.length`?
Was fordert `requestAnimationFrame` beim Browser an?

Stufe 2: Code verstehen, ergänzen und verbessern

In Stufe 2 musst du Code schrittweise lesen. Überlege bei einer Schleife: Wo startet der Zähler? Wie lange ist die Bedingung wahr? Wie wird der Zähler verändert?

Beispiel 1: Welche Ausgabe entsteht?

        for (let i = 2; i <= 8; i = i + 3) {
            console.log(i);
        }

Lösung: Es werden 2, 5 und 8 ausgegeben. Danach wird `i` zu 11 und die Bedingung `i <= 8` ist falsch.

Beispiel 2: Verbessere den Code. Beim Klick soll `anzeigen` ausgeführt werden.

        const knopf = document.querySelector("#info");
        knopf.addEventListener("onclick", anzeigen());

Lösung:

        const knopf = document.querySelector("#info");
        knopf.addEventListener("click", anzeigen);

Der Ereignisname enthält kein `on`. Außerdem wird die Funktion ohne Klammern übergeben, damit sie erst beim Klick läuft.

Beispiel 3: Ergänze die Lücken, sodass jedes Element ausgegeben wird.

        const farben = ["rot", "gelb", "grün"];
        for (let i = 0; i < __________; i++) {
            console.log(__________);
        }

Lösung: In die erste Lücke gehört `farben.length`, in die zweite `farben[i]`.

Jetzt bist du dran. Bearbeite die Aufgaben ohne Lösung:

Welche Zahlen gibt diese Schleife aus?

          for (let i = 12; i >= 3; i = i - 3) {
              console.log(i);
          }

Finde und verbessere den Fehler:

          const felder = document.querySelector(".feld");
          felder.forEach(function (feld) {
              console.log(feld);
          });

Erkläre, was bei `modus = "pause"` geschieht:

          switch (modus) {
              case "start": console.log("Los"); break;
              case "stopp": console.log("Ende"); break;
              default: console.log("Befehl unbekannt");
          }

Eine Animationsfunktion ruft `requestAnimationFrame(bewegen)` zweimal auf. Erkläre, warum das problematisch ist.

Stufe 3: Eigenen Code schreiben

In Stufe 3 entwickelst du selbst ein kurzes Codestück. Teile die Aufgabe zuerst in kleine Schritte. Verwende verständliche Variablennamen und prüfe anschließend jede Forderung aus der Aufgabenstellung.

Beispiel 1: Lege ein Array mit den Punktzahlen 4, 9 und 6 an. Füge danach die Punktzahl 12 hinzu und gib die Anzahl der Einträge aus.

Lösung:

        const punkte = [4, 9, 6];
        punkte.push(12);
        console.log(punkte.length);

Beispiel 2: Schreibe eine for-Schleife, die von 5 bis 25 in Fünferschritten zählt.

Lösung:

        for (let i = 5; i <= 25; i = i + 5) {
            console.log(i);
        }

Beispiel 3: Die Variablen `y`, `vy` und das Element `figur` existieren bereits. Schreibe eine Animationsfunktion, die die senkrechte Position verändert, darstellt und das nächste Bild anfordert. die y-Position eines Elementes ist figur.style.top.

Lösung:

        function bewegen() {
            y = y + vy;
            figur.style.top = y + "px";
            requestAnimationFrame(bewegen);
        }
        requestAnimationFrame(bewegen);

Jetzt bist du dran. Schreibe jeweils eigenen Code:

Wähle alle Elemente mit der Klasse `karte` aus und gib jedes Element mithilfe von `forEach` in der Konsole aus.
Gib die Werte des Arrays `temperaturen` mit einer for-Schleife in umgekehrter Reihenfolge aus.
Schreibe eine switch-Verzweigung für die Variable `taste`. Bei `"ArrowUp"` soll `y` um 10 verkleinert werden, bei `"ArrowDown"` um 10 vergrößert werden. Ein unbekannter Wert soll eine Meldung in der Konsole erzeugen.
Erzeuge acht `div`-Elemente in einer for-Schleife und hänge sie an das bereits ausgewählte Element `container` an.

Rückblick

Was solltest du vor der Prüfung können?

Du solltest Elemente auswählen und Ereignisse mit `addEventListener` verbinden können. Du solltest for-Schleifen lesen und schreiben, Arrays über ihren Index und ihre Länge verarbeiten sowie geeignete Fälle mit `switch` unterscheiden. Bei einer Animation solltest du Zustand, Darstellung und das Anfordern des nächsten Bildes erkennen.

Wenn dir eine Aufgabe schwerfällt, gehe zum passenden Arbeitsblatt zurück und bearbeite dort noch einmal eine der kurzen Aufgaben. Danach versuchst du diese Vorbereitung erneut, ohne die Beispiele anzusehen.

Wie geht es weiter?

Wenn du die Übungsaufgaben erklären und lösen kannst, bist du auf die drei Stufen der Prüfung gut vorbereitet.