03 Schleifen und Grafik

Einstieg in das Thema

Was brauchst du als Basiswissen?

Das bisherige Wissen zu JavaScript ist wichtig.

Worum geht es?

Du weißt vielleicht schon von anderen Sprachen, dass es grundlegende Konstrukte zur Umsetzung eines Algorithmus (also einer Anweisungsfolge) gibt. Dazu gehören die Schleifen, die für eine Wiederholung gleicher oder ähnlicher Schritte sorgen. Darum geht es jetzt.

Was ist das Ziel?

Am Ende kannst du mit Schleifen Anweisungen wiederholen und diese auch bei jedem Schritt ein wenig abändern.

Erarbeitung

Theorie

Aufgaben zu console.log

Lade die Datei

ab03_console-log.html

und öffne die Entwicklerwerkzeuge, sodass du die Konsole sehen kannst.

Aufgabe 1

Beschreibe die Schleife mit eigenen Worten. Was siehst du an Code, was wird damit bezweckt?

Aufgabe 2

Lasse die Zahlen bis 20 zählen. Was musstest du ändern?

Aufgabe 3

Gib nur gerade Zahlen aus. Was musstest du ändern?

Aufgabe 4

Gib das Quadrat der geraden Zahlen aus. Was musstest du ändern?

Theorie: Grafik

Aufgaben

Schaue die Datei

ab03_grafik.html

im Webbrowser an und lade sie auch in den Texteditor.

Aufgabe 5

Die Schleife wird nun anders beschrieben. Was steht alles im Kopf einer for-Schleife?

Aufgabe 6

Was sind die Parameter für das Rechteck?

Aufgabe 7

Was bewirkt "10+i*30" beim Rechteck-Zeichnen?

Aufgabe 8

Was passiert, wenn man den Rechtecken 30 Pixel Kantenlänge gibt?

Aufgabe 9

Lasse die Rechtecke nun bei 30x30, gib aber wieder 10 Pixel Abstand. Was musstest du ändern?

Aufgabe 10

Es sollen nun 10 Rechtecke werden. Was musstest du ändern?

Vertiefung

Nun wird es etwas anspruchsvoller.

Aufgabe 11

Lasse dir von der KI erklären, was eine geschachtelte Schleife ist und gib dies mit eigenen Worten wieder.

Aufgabe 12

Beschreibe, wie man ein Feld von 10x10 Quadraten mit einer geschachtelten Schleife zeichnen kann.

Aufgabe 13

Probiere deine Idee aus, lasse dir von der KI bei Fehlern helfen. Was waren die Schwierigkeiten?

Aufgaben zu Oberflächen-Elemente

Schaue die Datei

ab03_oberflaeche.html

im Webbrowser an und lade sie auch in den Texteditor.

Aufgabe 14

Beschreibe mit eigenen Worten, was das Programm bei Tastendruck macht. Beschreibe das Programm, nicht das Resultat.

Aufgabe 15

Was muss man tun, um 8 Listeneinträge zu bekommen?

Aufgabe 16

Was bedeutet "Eintrag " + i?

Aufgabe 17

Was passiert, wenn man "Eintrag"+i (also ohne Leerzeichen) schreibt?

Aufgabe 18

Was muss man tun, um eine ungeordnete Liste zu bekommen?

Aufgabe ohne KI

Erstelle selbst ohne KI den Programmcode zum Erstellen eines quadratischen Rasters von 7x7 Quadraten. Lasse dabei die Farben wechseln. Hast du schon das Farb- bzw. RGB-Kapitel bearbeitet, so lassen den Rot-Anteil zeilenweise größer werden. Wenn dem nicht so ist, schalte immer zwischen zwei Farben hin und her.

Lasse dein Resultat von der KI prüfen und gib die größten Fehler an.

Zusammenfassung

Was muss man wissen/können?

Du musst wissen,

was Schleifen sind,
wann deren Anwendung sinnvoll ist,
was Körper und Kopf der Schleife sind,
wie man den Körper begrenzt (also sagt, was alles dazu gehört) und
dass man Schleifen schachteln kann.

Du kannst also

selbst Ideen in Schleifen umsetzen und
dieses Ideen korrekt aufschreiben.

Letzteres gilt noch für kleine Algorithmen, aber kompliziert wird es noch schnell genug.

Was können anschließende Themen sein?

Die Verzweigungen fehlen noch. Darum geht es in der nächsten Lektion.