JavaScript Workshop 2

3/4

INHALT

Mit Formularen arbeiten(1/4)

Inhaltsüberprüfung von Formularen (2/4)

Statements (3/4)

Arrays (4/4)

Cookies (4/4)

Interessante Links zu JavaScript

JavaScript Workshop Teil 1

Tips - Übersicht

Statements
Normalerweise liest der Browser ein JavaScript linear, das heisst, Zeile für Zeile. Das ist aber oft nicht erwünscht und schränkt die Möglichkeiten sehr ein. Häufig soll das Script eine Entscheidung treffen und bestimmte Codeteile auslassen oder wiederholen. Dafür gibt es die Statements, die den Ablauf des Programms definieren und kontrollieren. Wir haben dies schon in einigen Beispielen (Text-Ticker, Inhaltsüberprüfung) angetroffen.

• Bedingungen: Bedingungen bestehen immer aus drei Teilen, der Bedingung selbst sowie zwei Resultaten, die eintreten, wenn die Bedingung erfüllt oder nicht erfüllt ist. Ein Beispiel: ‘Wenn ich 200 Franken habe, kann ich die Telefonrechnung bezahlen; ich muss die Rechnung bezahlen, sonst wird mir das Telefon abgestellt.’ JS orientiert sich in der Syntax stark an diesem alltäglichen Muster. Das obige Beispiel lässt sich exakt in JS-Code umsetzen:

if (haben = 200) {
telefon = true
} else {
telefon = false
}

Dieses if-else-Konstrukt ist die einzige Möglichkeit, wie JS Entscheidungen treffen kann. Dabei wird zuerst eine Bedingung geprüft. Wenn sie wahr ist, wird das erste Set von Statements durchgearbeitet, ist sie falsch, geht es mit dem zweiten Set oder dem Rest des Scripts weiter. Die Bedingung muss also mit einem boolschen Wert beantwortbar sein, sie muss entweder wahr (true) oder falsch (false) sein können. Sie kann aus einer Variable oder einer Funktion eingelesen werden, am häufigsten jedoch werden innerhalb einer Bedingung zwei oder mehrere Werte durch Operatoren verglichen (vgl. Kasten). Die korrekte Syntax einer Bedingung sieht so aus:

if (Bedingung) {
Statements, falls wahr
} else {
Statements, falls falsch
}

• Wiederholungen: Um bestimmte Codezeilen zu wiederholen, bietet JS zwei Möglichkeiten: den for-Loop und das while-Statement. Beide Varianten ermöglichen prinzipiell dasselbe, unterscheiden sich aber in ihrer Syntax und ihrer Anwendung: Während mit while alle möglichen Wiederholungen durchgeführt werden können, ist for eher für numerische Loops geeignet.

Das while-Statement:
while (Bedingung) {
Statements
}

Solange die Bedingung wahr ist, werden die Statements in den geschwungenen Klammern ausgeführt. Die Wiederholung entsteht, wenn die Statements so lange wiederholt werden, bis die Bedingung ändert (z. B. falsch wird).

Das for-Statement:
for (Zählerinitialisierung; Bedingung; Zählerupdate) {
Statements
}

Im Unterschied zum while-Loop wird hier der Zähler gleich in den Befehl integriert. Ein Beispiel, das mit beiden Methoden dasselbe Resultat generiert, soll diesen Unterschied verdeutlichen:

count = 1
phrase = ""
while (count <= 10) {
phrase += "Repeat"
count++
}
phrase = ""
for (count = 1; count<= 10; count++) {
phrase += "Repeat"
}

Beide Varianten machen dasselbe: Sie zählen zehn Mal durch und fügen der Variable phrase jeweils das Wort Repeat hinzu. Als Resultat erhalten Sie diese Variable, die zehn Mal das Wort Repeat enthält. Interessant ist, dass die Variable count zuletzt den Wert 11 hat. Das kommt davon, dass der Loop wiederholt wird, bis count gleich 10 ist, dann wird das zehnte Repeat angehängt und der Wert von count um 1 erhöht. Beim nächsten Durchlauf ist die Bedingung falsch, der Loop wird abgebrochen.

function search(form)
for (var i=0;i<form.radArray.length;i++) {
if (form.radArray[i].checked == true) {
break
}
}
alert("Radiobutton" + (i+1) + "ist ausgewählt.")
}
<FORM>

<INPUT TYPE="radio" NAME="radArray" CHECKED>Auswahl 1<BR>

<INPUT TYPE="radio" NAME="radArray">Auswahl 2<BR>

<INPUT TYPE="radio" NAME="radArray">Auswahl 3<BR>

<INPUT TYPE="button" VALUE="Test" onClick="search(form)">

</FORM>

• Loop abbrechen: Manchmal ist es nötig, dass ein Loop schon unterbrochen wird, bevor die Bedingung ändert. So macht es z.B. wenig Sinn, wenn ein Script weiter nach einem Wert sucht, auch wenn dieser schon gefunden ist. Das Beispiel rechts oben benutzt einen Loop, um festzustellen, welcher Radiobutton ausgewählt wurde. Würde der Loop nicht gestoppt, wenn der entsprechende Button erkannt wird, würde das zu unsinnigen Anzeigen führen. Deshalb wird der Loop mit dem break-Befehl unterbrochen.

Es kann auch vorkommen, dass nicht alle Werte gezählt werden sollen. Stellen Sie sich vor, Sie benutzen ein JS, um die Summe von Online-Bestellungen zu erhalten. Jede zehnte Bestellung soll aber nicht gezählt werden, weil sie der User im Sinne eines Werbegeschenkes nicht bezahlen muss. Dafür brauchen Sie den continue-Befehl. Er bewirkt, dass der aktuelle Wert nicht gezählt wird und der Loop von vorne beginnt:

total = 0
for (count = 1;count<=bestellungen;count++) {
if ((count % 10) == 0) {
continue
}
total += preis[count]
}

Zunächst wird die Variable total auf Null gesetzt. In Zeile 2 wird der Loop begonnen – er zählt weiter, bis alle Bestellungen durchgearbeitet sind. Als erstes Statement des Loops folgt eine Bedingung. Das Script soll feststellen, ob der aktuelle Wert eine Multiplikation von 10 sei. Dafür braucht man den Prozent-Operator. Er gibt als Resultat aus, welchen Rest eine Division ergibt. Das ist bei Zehnerpotenzen, die durch Zehn geteilt werden, immer Null. Die Bedingung ist also erfüllt, wenn der Rest gleich Null ist. In diesem Fall bricht das continue-Statement den Loop ab und startet von vorne. Ist die Bedingung nicht erfüllt, wird die Variable total um den Wert der aktuellen Bestellung erhöht.

Vorherige Seite | Tips | Nächste Seite