JavaScript For Beispiel 2: Verwendung von For-Schleifen

Folgende Beispiele zeigen, was sich sonst alles mit dem JavaScript For-Statement anstellen lässt. Im ersten Block des nächsten Code-Abschnitts wird eine For-Schleife verwendet, um Zeichen in unterschiedlichen Schriftgrößen auszugeben. Dazu wird die Schriftgröße über die Periodenlänge von PI per Sinusfunktion variiert. Mit Hilfe der JavaScript-Methode document.write() wird dann ein SPAN-Element ausgegeben, in welchem – in der berechneten Schriftgröße – ein „ö” ausgegeben wird.

Der nächste Codeblock gibt eine Farbpalette mit sechzehn Graustufen aus. Hier wird, zur Umwandlung des Integer-Wertes in den ihm entsprechenden Hexadezimalwert, ein String verwendet, auf dessen einzelne Elemente man mit dem Vektoroperator ([]) zugreifen kann. Letztlich handelt es sich hierbei um ein Array von Zeichen, wobei der Index des Zeichens zur jeweiligen hexadezimalen Ziffer führt. Die Elemente dieses Arrays stellen dabei die einzelnen hexadezimalen Ziffern dar. Bitte beachten Sie: Diese Form der „Umrechnung” funktioniert nur bei Werten von 0 bis 15! Auch hier wird das auszugebende HTML-Tag samt Formatierung über die Methode write() des JavaScript-Objekts Document ausgegeben. Genau wie im Block zuvor werden die CSS-Angaben für das SPAN-Element direkt mit dem Tag ausgegeben (s.a. Styles).

Im letzen Abschnitt dieses Beispiels wird das große Alphabet ausgegeben. Hier werden verschiedene Methoden des String-Objekts, welches für die Verarbeitung von Zeichenketten zuständig ist, verwendet. Zur Ermittlung des Startwertes und der Abbruchbedingung werden die jeweiligen Zeichencodes unter Verwendung der String-Methode charCodeAt() ermittelt – dies erspart das nachschauen in der Zeichencode-Tabelle. Die Ausdrücke "A" und "Z" sind Strings, zu deren erstem Zeichen (Parameter 0 der charCodeAt-Methode; Wir erinnern uns: Indexe von Arrays beginnen bei JavaScript immer bei 0) der jeweilige Zeichencode ermittelt wird. Durch Verwendung der String-Methode fromCharCode wird bei der Ausgabe dann der Zeichencode wieder in das korrespondierende Zeichen umgewandelt und dann ausgegeben.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Wieder wird bei dieser For-Schleife eine Variable vom Tyl Float genutzt.
// Hier soll verdeutlicht werden, dass zur Veränderung der Zählervariablen,
// auch die Verwendung von Ausdrücken beliebiger Komplexität möglich ist.
for (var v = 0; v < 2 * Math.PI; v+=Math.PI/12)
  // Ausgabe erfolgt jeweils in verschiedenen Schriftgrößen
  document.write ('<span style="vertical-align:middle;font-size:' + (4 * Math.abs (Math.sin (v)))  + 'em">&ouml;</span>');
document.write ('<br>');

// Ausgabe einer Farbpalette (hier in Graustufen von Schwarz nach Weiß)
// Hier wird, da mehrere Anweisungen pro Durchgang ausgeführt werden sollen,
// der entsprechende Anweisungsblock mit den geschweiften Klammern umschlossen.
for (var k = 0; k < 16; k++) {
  // Wert von k in entsprechende Hexadezimalziffer umwandeln
  var bcolor = "0123456789ABCDEF"[k];
  // Farbangabe in der Kurzform besteht aus drei hexadezimalen Ziffern
  // für die einzelnen Farbwerte (rot, grün und blau), die jeweils verdoppelt
  // werden. (aus der CSS-Kurzform #ABC wird #AABBCC)
  bcolor += bcolor + bcolor;
  // Span-Element mit der aktuellen Hintergrundfarbe ausgeben.
  document.write ('<span style="background-color:#' + bcolor  + '">&nbsp;&nbsp;</span>');
}
document.write ('<br>');

// Großes Alphabet ausgeben
// Als Startwert wird hier der Zeichencode von A verwendet.
// Die Abbruchbedingung ist gegeben, wenn die Zählervariable einen
// Wert enthält, der über dem des Zeichencodes des Buchstaben Z liegt.
for (var l = "A".charCodeAt (0); l <= "Z".charCodeAt (0); l++)
  // Zur Ausgabe wird der Zeichencode wieder in das entsprechende
  // Zeichen umgewandelt.
  document.write (String.fromCharCode (l) + ' ');
// -->
</script>

« zurück zu Seite 1