JavaScript Switch / Case

Die Switch-Anweisung dient der Verarbeitung von Fallunterscheidungen. Anders als bei der If-Anweisung wird bei der Fallunterscheidung mittels Switch unter Bewahrung einer besseren Übersichtlichkeit zwischen mehr Alternativen unterschieden. Zwar ist es auch mit einem If-Konstrukt möglich, eine Switch-Anweisung nachzubilden, jedoch eignet sich diese Form der Fallunterscheidung eher bei einer nötigen Verschachtelung von Alternativen, bei der mehrere Rahmenbedingungen zu einer stufenweisen Aufspaltung des Codes führt. Gibt es an einem Punkt im Programmablauf mehr als nur zwei Möglichkeiten zum Fortfahren, so ist der Einsatz des JavaScript Switch-Statements sinnvoll. Die Switch-Anweisung hat folgende Form:

			switch (Variable oder Ausdruck) {
				case Wert für diesen Fall: Anweisung(en)
					[break;]
					:
					:
				[default: Anweisung(en)]
			}
		

Eingeleitet wird der JavaScript-Code für eine Switch-Anweisung durch das Schlüsselwort „switch”, auf den ein geklammerter Ausdruck und ein in geschweifte Klammern gefasster Code-Block folgt. Eine Fallunterscheidung durch das Schlüsselwort „case”, auf das ein Wert folgt. Hat der durch Switch verwendete Ausdruck den hier notierten Wert, so werden die Anweisungen ab diesem Case ausgeführt. Eine Fallunterscheidung wird mit dem Schlüsselwort „break”, auf welches ein Semikolon folgt, abgeschlossen.

Wird break weggelassen, so führt dies dazu, dass alle auf den Case folgenden Anweisungen bis zum Autfreten des nächsten Break oder bis zum Ende der geklammerten Switch-Anweisung ausgeführt werden. Neben den vordefinierten Fällen kennt das Switch-Statement einen Default-Bereich. Dieser wird normalerweise am Ende des Switch-Blocks notiert und durch „default:” eingeleitet.

JavaScript Switch Beispiel:

Folgendes Beispiel zeigt einen typischen Anwendungsfall für eine Switch-Anweisung. Hier wird zunächst eine Datenstruktur mit Informationen definiert. In einem Array wird hier unter der Variablen struc eine Reihe von JavaScript-Objekten gespeichert. Ein Objekt der hier gelisteten Datenstruktur besteht aus den Eigenschaften uname und geschlecht.

Nun sollen die Eigenschaften eines jeden in der Struktur gespeicherten Objekts in Form einer Zeichenkette ausgegeben werden. Hierzu muss zunächst durch das Array iteriert werden – alle Elemente, die im Array gespeichert sind, werden nacheinander durch das Script verarbeitet. In der unten gelisteten For-Schleife geschieht genau dies. Über die Array-Eigenschaft Length wird die Anzahl der Elemente ermittelt. Diese bildet zugleich die Grenze bzgl. der durch die For-Schleife durchgeführten Anzahl der Iterationen.

Die Ausgabe des Codes soll hier nicht einfach den Inhalt der Eigenschaften uname und geschlecht der Datenstruktur ausgeben, sondern die in geschlecht gespeicherten Kürzel in interpretierter Form ausgeben. Zu diesem Zweck wird nun die Variable out definiert, in der die zur Ausgabe bestimmte Zeichenkette zusammengestellt wird. An der Stelle, an der das im Datensatz gespeicherte Geschlecht ausgegeben werden soll, wird nun eine Switch-Anweisung verwendet, welche die Fallunterscheidungen ünternimmt.

Im Beispiel wird zwischen drei Fällen unterschieden. Der unter Geschlecht gespeicherte Wert kann in unserem Fall das Zeichen 'w' (weiblich), 'm' (männlich) oder ein beliebiges anderes Zeichen enthalten (wird hier durch ein Fragezeichen angedeutet). Genau das sind unsere Fallunterscheidungen, die sich in den Case-Abschnitten wiederspiegeln. Der Default-Bereich wird immer dann ausgeführt, wenn unter der Eigenschaft geschlecht nicht 'w' oder 'm' gespeichert ist. Die letzte Anweisung innerhalb des For-Blocks sorgt dafür, dass die Zeichenkette mit den Informationen zum jeweiligen Datensatz per write() in aktuellen HTML-Dokument ausgegeben wird. Diese Methode ist Teil der Schnittstelle des zentralen JavaScript-Objekts Document.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Array mit Objekten erzeugen
// Eigenschaften der Objekte sind uname und geschlecht
var struc =  [ { uname: 'Wolli', geschlecht: '?' },
         { uname: 'Willi', geschlecht: 'm' },
         { uname: 'Walli', geschlecht: 'w' } ];

// Alle enthaltenen Elemente von struc durchgehen
for (var i = 0; i < struc.length; i++) {
  // Variable zur Zwischenspeicherung der Ausgabe zum aktuell
  // in Bearbeitung befindlichen Element
  var out = 'Benutzername: ' + struc[i].uname + ', Geschlecht: ';
  // Beim Geschlecht gibt es drei Möglichkeiten
  switch (struc[i].geschlecht) {
    // 1. Fall: 'w' ist in der Eigenschaft geschlecht angeben
    case 'w': out += 'weiblich';
      break;
    // 2. Fall: Eigenschaft geschlecht ist mit 'm' belegt
    case 'm': out += 'm\u00e4nnlich';
      break;
    // In allen anderen Fällen wird der Default-Bereich ausgeführt
    default:  out += 'keine Angabe';
  }
  // Gesammelte Informationen im Dokument ausgeben
  document.write (out + '<br>');
}
// -->
</script>

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht