Materialien zum Unterricht

Farbtabelle

Farben werden durch die Angaben der Helligkeitswerte der drei Grundfarben Rot, Grün und Blau beschrieben. Jeder der drei Helligkeiten kann Werte zwischen 0 und 255 annehmen (8 Bit Farbtiefe).

Die konkreten Werte werden durch Ziffern des hexadezimalen Zahlensystems angegeben (0, 1, ... 9, A, B, ...F). 00 bedeudet Aus, FF ist die volle Helligkeit. Ein # vor den Ziffern weist die Zahlenkombination als Farbwert aus. Falls die beiden Ziffern für einen Farbwert gleich sind, reicht es aus, zur Vereinfachung nur einen Wert anzugeben.

Einige Beispiele:

#F00
#C90
#30C
#3F0
#F60
#AAA
#CFF
#7A0
#F0F

 

 

1. Einfache Farbleiste

Es soll eine HTML-Seite geschrieben werden, in der beim Aufrufen ein Script 16 nebeneinader liegende Bereiche mit einer Farbe wachsender Helligkeit füllt.

  1. Erstelle eine HTML-Seite mit dem HTML-Grundgerüst. Binde im <head> wie gewohnt jquery.min.js ein.
  2. Im <body> wird ein Bereich ohne ID und Formatierungen erzeugt, der 16 weitere Bereiche enthält. Alle 16 Bereiche erhalten die Klasse .kiste und jeder Bereich eine aufsteigende ID:
  3. Im <head> wird die Klasse .kiste formatiert:
  4. Erstelle eine leere Funktion mit dem Namen farben(). Diese Funktion soll automatisch beim Laden der Seite aufgerufen werden:

  5. Als Test für den korrekten Ablauf soll die Funktion den Hintergrund eines Bereiches mit einer Farbe füllen:

    Diese Programmzeile bewirkt, dass beim Element mit der ID=6 das CSS-Attribut background-color mit dem Wert #008 versehen wird.
    Spiele rum und fülle andere Bereiche mit anderen Farben
  6. Mit Hilfe einer for-Schleife sollen nun alle Bereiche mit der gleichen Farbe gefüllt werden:
  7. Es soll jetzt jeder Bereich mit einer anderen Farbe befüllt werden. Dazu verwendet man die bei jedem Schleifendurchlauf größer werdende Laufvariable i.

    Das geht für die ersten 10 Bereiche gut, liefert aber für die letzten 6 Bereiche keine Farbe mehr :-(
  8. Der Grund liegt in den Zahlen 10 bis 15, mit denen die Laufvariable in den letzten Schleifendurchläufen belegt ist. Der Blauwert der Farbe muss von 0 bis F und nicht von 0 bis 15 laufen.
    Die dezimalen Zahlen müssen in hexadezimale Werte umgewandelt werden:

    Die Methode toString(16) betrachtet die Zahl i als eine Zahl im Hexadezimalsystem (16) und gibt das entsprechende Zeichen (0...F) zurück.
  9. Unschöne ist, dass die Bereiche (<div>) von Hand angelegt werden müssen. Besser wäre es, wenn sie ebenfalls in einer Schleife erzeugt werden.
    1. Gib dem bisher unbenannten, umschließenden Bereich die ID ausgabe.
    2. Löschen alle 16 Bereiche, die bisher die Farben angezeigt haben.
    3. Füge in der Funktion vor der bisherigen Schleife eine weitere Schleife ein, die die 16 Bereiche erzeugt.
  10. Die beiden Schleifen sollen nun zusammengefasst werden. In einer Schleife wird bei jedem Durchlauf ein Bereich ohne ID erzeugt und diesem Bereich sofort die Hintergrundfarbe zugewiesen.
  11. Die eine Farbzeile ist recht dürftig. Es soll jetzt nicht nur die blaue Farbe verändert werden, sondern zusätzlich noch die grüne Farbe. Dazu muss die erste Farbreihe 16 mal mit jeweils verändertem Grünwert dargestellt werden. Das erfolgt in einer neuen Schleife mit der Zählvariablen j, die die erste Schleife umgibt. Aus dem j-Wert wird der Farbwert für Grün bestimmt.

    Damit die einzelnen Zeilen untereinander stehen, müssen die Zellen einer Zeile in einen <div> eingesperrt werden, der die Eigenschaft float:left hat. Vor der inneren Schleife muss also der Variablen kisten der öffnende <div>-Tag mit der Eigenschaft float:left zugefügt werden und nach der Schleife der schließende Tag.
    Danach sollte die Anzeige so aussehen:
  12. Als nächstes erscheint in jedem Farbkästchen der hexadezimale Farbwert.
  13. Abschließend kann nun eine weitere Schleife eingebaut werden, die auch noch die Rotwere verändert. Es werden dann insgesamt 16*16*16=4096 Farbkästchen dargestellt.