Websiteentwicklung: JavaScript: Schleifen
Schleifen
[Bearbeiten]Schleifen dienen dazu, bestimmte Programmteile zu wiederholen. Je nach Anwendungszweck gibt es hier mehrere Konstruktionsmöglichkeiten.
for – Zählschleifen
[Bearbeiten]Mit Hilfe von for - Zählschleifen werden Programmteile wiederholt, wenn die Anzahl der Wiederholungen bekannt und vom Programmierer festgelegt wird.
Syntax
[Bearbeiten]
for (var Zählvariable = StartWert; Zählvariable <= Endwert; Zählvariable_erhöhen/vermindern)
{
Schleifenanweisung_1;
Schleifenanweisung_2;
.....
Schleifenanweisung_n;
}
Die Zählvariable wird auf den Startwert gesetzt, der Vergleich mit dem Endwert wird definiert ( < , <= , > oder >= ) und die Anweisung zur Veränderung des Zählers nach dem Schleifendurchlauf wird festgelegt.
Beispiel : in 1-er-Schritten vorwärts
[Bearbeiten]Die folgende Schleife zählt einfach vorwärts von 1 bis 10 :
for (var i = 1; i <= 10; i++)
{
document.write(i);
}
Beispiel : in 0.2-er-Schritten rückwärts
[Bearbeiten]Die folgende Schleife zählt in 0.2-Schritten rückwärts von 1 bis 0 :
for (var i = 1; i >= 0; i=i-0.2)
{
document.write(i);
}
Beispiel: Quadrat-Zahl-Tabelle
[Bearbeiten]Man könnte mit Hilfe einer Zählschleife eine Quadratzahl-Tabelle ausgeben - mathematisch keine besonders anspruchsvolle Anwendung, der Mechanismus der Zählschleife wird aber gut deutlich:
<html>
<head>
<title>Tabelle</title>
<SCRIPT type="text/javascript">
function fQuadrat(dZ)
{
var dQ=dZ*dZ;
return dQ;
}
function fTabelle()
{
var iZeilen=parseInt(document.frmTabelle.txtZeilen.value);
if(iZeilen>=1)
{
with(document)
{
open();
write("<HTML>");
write(" <HEAD>");
write(" <TITLE>Tabelle der Quadratzahlen mit Java-Script<\/TITLE>");
write(" <\/HEAD>");
write(" <BODY>");
write(" <H3>Tabelle der Quadratzahlen von 1 bis " + iZeilen + "<\/H3>");
write(" <TABLE BORDER=1>");
write(" <TR>");
write(" <TD>Zahl<\/TD><TD>Quadrat<\/TD>");
write(" <\/TR>");
// ================ Beginn der Zaehlschleife: ==================
for (var i = 1; i <= iZeilen; i++)
{
write(" <TR>");
write(" <TD>" + i + "<\/TD><TD>" + fQuadrat(i) +"<\/TD>");
write(" <\/TR>");
}
// ================ Ende der Zaehlschleife =====================
write(" <\/TABLE>");
write(" <\/BODY>");
write("<\/HTML>");
close();
}
}
else
{
alert("Groesser als 1 habe ich gesagt!");
}
}
</script>
</head>
<body>
<form method="get" name="frmTabelle">
<h3>Tabelle der Quadratzahlen erzeugen</h3>
Gib eine ganze Zahl groesser 1 ein:
<input type="text" name="txtZeilen">
<input type="button" name="btnStart" value="Start"
onClick="javascript:fTabelle()">
</form>
</body>
</html>
Beispiel: Teilerliste einer Zahl
[Bearbeiten]Auch alle Teiler einer Zahl lassen sich mit Hilfe einer for-Schleife und der in dem Kapitel "Bedingte Anweisungen" bereits besprochen Teilbarkeitsfunktion ausgeben:
<html>
<head>
<title>Teilerliste einer Zahl n</title>
</head>
<body>
<script type="text/javascript">
function fTeiler(iZ,iT)
{
var iR =0;
if(iT!=0) //Division durch 0 ist verboten!
{
iR=iZ%iT;
if(iR==0)
{
//Es bleibt kein Rest - iZ ist teilbar durch iT
return true;
}
else
{
//Es bleibt ein Rest - iZ ist nicht teilbar durch iT
return false;
}
}
else
{
//wegen verbotener Division durch 0 nicht teilbar
return false;
}
}
function fTeilerAusgabe()
{
with(document.frmTeiler)
{
tAusgabe.value="";
var iZahl=parseInt(txtZahl.value); //Text in Integer übersetzt
var bOK=false;
if(iZahl>=1)
{
for (var iT=1 ; iT<=iZahl ; iT++) // von 1 bis Zahl hochzählen
{
bOK=fTeiler(iZahl,iT);//Funktionsaufruf fTeiler
if(bOK==true)
{
tAusgabe.value=tAusgabe.value + iT + "\n";
}
}
}
else
{
alert("Größer als 1 habe ich gesagt!");
}
}
}
</script>
<form method="get" name="frmTeiler">
<h3>Berechnung der Teilermenge einer Zahl n</h3>
<b>Gib eine ganze Zahl n > 1 ein:</b><br>
<input type="text" name="txtZahl"><br>
<input type="button" name="btnStart" value="Berechnung starten"
onClick="fTeilerAusgabe()">
<br>
<textarea name="tAusgabe" cols="20" rows="50"></textarea>
</form>
</body>
</html>
for / in - Schleifen
[Bearbeiten]for / in - Schleifen werden benutzt, um alle Elemente eines Objektes oder eines Arrays nacheinander anzusprechen oder alle Eigenschaften eines Objektes nacheinander zu lesen.
Syntax
[Bearbeiten]
for (var Eigenschaft in Objekt)
... Objekt[Eigenschaft] ...
Beispiel: Eigenschaften des Window-Objektes
[Bearbeiten]Das folgende Programm gibt alle Eigenschaften des Objektes „Window“ aus.
<html>
<head>
<title>Eigenschaften des Objektes window</title>
</head>
<body>
<script type="text/javascript">
var sProp = "";
var curTyp = "";
document.write("<h1>Eigenschaften von <u>Window<\/u><\/h1>");
for (var Prop in window) {
curTyp = typeof window[Prop];
sProp = (curTyp=="function"||curTyp=="object") ? curTyp : window[Prop];
document.write("window." + Prop + ": " + sProp + "<br>");
}
</script>
</body>
</html>
while – kopfgesteuerte Schleifen
[Bearbeiten]while-Schleifen werden eingesetzt, wenn die Schleife ausgeführt werden soll, solange eine Bedingung erfüllt ist. Bei der ersten Nichterfüllung der Bedingung bricht die Schleife ab. Die Bedingung wird bereits vor dem ersten Schleifendurchlauf geprüft – man spricht deshalb von einer „pre-checked-loop“ oder einer „kopfgesteuerten Schleife“. Der Code innerhalb einer Schleife dieser Art, wird anders als in einer „do / while“-Schleife – unter Umständen (wenn die Kopfbedingung nicht erfüllt ist) nicht ein einziges Mal ausgeführt.
Syntax
[Bearbeiten]
while(Bedingung)
{
Anweisung_1;
Anweisung_2;
...
Anweisung_n;
}
Beispiel: iterative Berechnung der Quadratwurzel
[Bearbeiten]Das folgende Skript berechnet die Quadratwurzel einer Zahl mit einem Näherungsverfahren. So lange die Differenz der Näherungen einen vorgegebenen Wert nicht unterschreitet, wird die Näherung weiter verbessert. Die Näherung wird mit einer „while“-Schleife ermittelt.
<html>
<head>
<title>Quadratwurzel</title>
<script type="text/javascript">
var x=Math.abs(parseInt(prompt("Bitte geben Sie eine Zahl ein :")));
var sq1=0;
var sq2=x; //1. Näherung wird auf die Zahl selbst gesetzt
while((sq2-sq1)>=0.000000000000001)
{
sq1=x/sq2;
sq2=(sq1+sq2)/2;
}
alert("Quadrat-Wurzel aus " + x + " ist " + sq2)
</script>
</head>
<body>
</body>
</html>
do / while – fußgesteuerte Schleifen
[Bearbeiten]Bei do/while-Schleifen wird die Wiederholungs-Bedingung erst geprüft, nachdem die Anweisungen in der Schleife ausgeführt wurden. Deshalb heißen diese Schleifen auch „post-checked-loops“ oder „fußgesteuerte Schleifen“. Ist die Bedingung erfüllt, wird die Schleife ein weiteres Mal durchlaufen. Wie aus dem eben gesagten hervorgeht, wird der Kode innerhalb einer Schleife dieser Art in jedem Fall mindestens einmal ausgeführt.
Syntax
[Bearbeiten]do
{
Anweisung_1;
Anweisung_2;
...
Anweisung_n;
}
while(Bedingung)
Beispiel: Ermitteln des größten gemeinsamen Teilers (GGT)
[Bearbeiten]Der größte gemeinsame Teiler von zwei Zahlen (z. B. wichtig zum Kürzen von Brüchen) wird hier mit dem Verfahren der Kettendivision ermittelt. Der Kern der Arbeit wird in der Funktion „fGGT“ innerhalb einer „DO / WHILE“-Schleife verrichtet.
<html>
<head>
<title>JavaScript - Beispiel fuer eine 'DO WHILE'-Schleife</title>
<script type="text/javascript" >
function fGGT(iX,iY)
{
//ermittelt den GGT nach dem Verfahren der Kettendivision
var a= Math.max(iX,iY)
var b= Math.min(iX,iY);
var rest=0
do
{
rest = a%b;
a=b;
b= rest;
}
while(rest>0)
return a;
}
function fBerechne()
{
with (document.frmGGT)
{
//Auslesen der Textfelder und sichertsellen nummerischer Werte
// 1.Feld
iX = parseInt(txtZahl1.value);
txtZahl1.value = iX;
// 2.Feld
iY = parseInt(txtZahl2.value);
txtZahl2.value = iY;
//Aufruf der Funktion fGGT
txtGGT.value = fGGT( iX, iY );
}
}
</script>
</head>
<body>
<h1>Ermittlung des groessten gemeinsamen Teilers (ggT) zweier Zahlen</h1>
<form method="get" name="frmGGT">
<h2>Eingabe</h2>
<p>
a = <input type="text" name="txtZahl1"><br>
b = <input type="text" name="txtZahl2">
<input type="button" name="btnStart" value="ggT ermitteln"
onClick="fBerechne()">
</p>
<h2>Ergebnis</h2>
<p>
ggT = <input type="text" name="txtGGT">
</p>
</form>
</body>
</html>
break / continue
[Bearbeiten]break / continue ermöglichen es Programmierern, Bedingungen zu bestimmen, unter denen Schleifen anders als üblich durchlaufen werden sollen.
break
[Bearbeiten]Im Zusammenhang mit der „switch“-Anweisung wurde das Kommando break bereits vorgestellt. In Schleifen bewirkt break nichts anderes, als schon dort erläutert, d. h. durch break wird eine Schleife sofort beendet und zwar auch dann, wenn die Schleifenbedingung – etwa in einer „DO / WHILE“-Schleife – noch „true“ ist.
Beispiel
[Bearbeiten]for(var i=1; i<=10; i++)
{
document.write(i);
if(i==3) break;
}
Diese Schleife würde nur bis 3 zählen, obwohl die Zählvariable ursprünglich bis 10 laufen soll.
continue
[Bearbeiten]Mit „continue“ können wir aus einer Schleife heraus vorzeitig ihren nächsten Durchlauf erzwingen. Im nächsten Beispiel wird mit diesem Kommando ein Fehler vermieden, der von einer Division durch 0 ausgelöst werden würde.
Beispiel
[Bearbeiten]for(var i=-10; i<=10; i++)
{
if(i==0)
continue;
document.write(1/i);
}
Aufgaben + Lösungen
[Bearbeiten]