Materialien zum Unterricht

Farbtabelle mit Schleife

Neben der einfachen Anweisung und der Verzweigung ist die Schleife die dritte Grundstruktur der Programmierung.

Die Programmstruktur der Schleife sieht so aus:

for (var i=0;i<=15;i++)
    {
	    hier kommt der Programmtext
    }

Zu Beginn wird die Laufvariable i festgelegt. Sie erhält den Wert 0. Die Abbruchbedingung i<=15 bedeutet, dass die Schleife so lange durchlaufen wird, wie die Laufvariabel diese Bedingung erfüllt, also kleiner als 16 ist. Da bei 0 gestartet wurde, wird die Schleife 16 mal durchlaufen.

Schreibe das erste Schleifenprogramm Farben1.

Ändere die Funktion so um, dass
a) die ersten beiden Zahlen der Farbcodierung geändert werden. (also statt #200000 steht dann #220000)
b) der Grünwert geändert wird.
c) der Rot-, Grün- und Blauwert gleichzeitig geändert wird (Welche Farben werden dann angzeigt?)

Erweitere das Programm um zwei weitere Schleifen, so dass folgende Ausgabe erfolgt:

Es soll nun eine Zeile einer Tabelle erstellt werden, in der 16 Spalten enthalten sind und jede Zelle eine andere Hintergrundfarbe hat.

1. Der HTML-Text der Zeile könnte so aussehen (nicht abschreiben, sondern nur verstehen!) :
   <table >
   <tr>
   <td bgcolor="#000000"> #000000 </td>
   <td bgcolor="#110000"> #110000 </td>
   <td bgcolor="#220000"> #220000 </td>
   <td bgcolor="#330000"> #330000 </td>
   <td bgcolor="#440000"> #440000 </td>
   <td bgcolor="#550000"> #550000 </td>
   <td bgcolor="#660000"> #660000 </td>
   <td bgcolor="#770000"> #770000 </td>
   <td bgcolor="#880000"> #880000 </td>
   <td bgcolor="#990000"> #990000 </td>
   <td bgcolor="#AA0000"> #AA0000 </td>
   <td bgcolor="#BB0000"> #BB0000 </td>
   <td bgcolor="#CC0000"> #CC0000 </td>
   <td bgcolor="#DD0000"> #DD0000 </td>
   <td bgcolor="#EE0000"> #EE0000 </td>
   <td bgcolor="#FF0000"> #FF0000 </td>
   </tr>
   </table>
2. Es sind drei Teile zu erkennen: Der Beginn mit <table > <tr>, der mit geringen Veränderungen sich wiederholende Teil <td bgcolor="#000000"> #000000 </td> und das Ende </tr> </table>.
   In der Variablen "Text" muss vor der Ausgabe auf dem Bildschirm dieser HTML-Quelltext enthalten sein. Der Beginn und das Ende werden außerhalb der for-Schleife erzeugt, weil sie ja nur einmal vorkommen. Der Mittelteil, der sich 16 mal wiederholt, wird innerhalb der for-Schleife erzeugt.
3. Die Variable "Text" wird also mit dem Beginn der Tabelle initialisiert (gestartet).
   text="<table>.......
4. Im ersten Teil der for-Schleife wird jetzt die Variable fa gefüllt. Es wird aus der Zählvariablen i der Rotteil des Farbwertes sowie der gesamte Farbwert erzeugt. (fa="#"+i.toString(16) .....) Die Variable fa muss nach dem ersten Durchlauf den Wert #000000, nach dem zweiten Durchlauf #110000 und nach dem letzten Durchlauf den Wert #FF0000 enthalten.
5. Schwierigster Teil: zu der Variablen "Text" wird der neue Spalteneintrag hinzugefügt. Das geht los mit
   text=text +
   Hinter dem + muss jetzt eine Konstruktion stehen, die den Spalteneintrag erzeugt:
   "<td bgcolor=" fa + .......
   Damit ist die for-Schleife beendet.
6. Nach dem Ende der for-Schleife wird an die Variable "Text" noch das Ende der Tabelle angehängt:
   text = text + "</tr>......
7. Jetzt ist nur noch die Variable "Text" auszugeben:
   document.wite(Text);

zurück