Kleiner JavaScript Kurs

Schleifen

In den folgenden Beispielen wollen wir einige Programmteile immer wieder durchlaufen (in einer "Schleife").
Unser Programm soll alle Zahlen von 1 bis 100 zusammenzählen, also 1+2+3+4+5+6+ ....+98+99+100
(wobei 1 / die "Startzahl" und 100 / die "Endzahl" über Eingabefelder geändert werden können).
Der Programmablauf sieht folgendermassen aus:
Setze die Summe auf 0
Addiere zur Summe 1 dazu (Summe = Summe + 1)
Addiere zur Summe 2 dazu (Summe = Summe + 2)
Addiere zur Summe 3 dazu (Summe = Summe + 3)
Addiere zur Summe 4 dazu (Summe = Summe + 4)
...
Addiere zur Summe 100 dazu (Summe = Summe + 100)
Das Programm macht immer das Gleiche: Summe = Summe + i
Dieser Ablauf lässt sich am elegantesten mit einer - Schleife - lösen.

Die "for" Schleife

for (var i=Start;i<=Ende; i++) { } Syntax: for (Schleifenzähler auf Startwert setzen; Bedingung für Schleifendurchlauf; Schrittweite den Schleifenzählers)
{
Programm, das in Schleife immer wieder ausgeführt wird
}


<html> <head> <title>JavaScript Kurs; Schleifen</title> <script type="text/javascript"> function Schleife_for(){ var Start=parseInt(document.getElementById('eingabeStart1').value); var Ende=parseInt(document.getElementById('eingabeEnde1').value); var Ausgabe=document.getElementById('meinAusgabefeld'); var Summe=0; for (var i=Start;i<=Ende; i++){ Summe=Summe+i; } Ausgabe.innerHTML = "Die Summe der Zahlen von " + Start + " bis " + Ende + " = " + Summe; } </script> </head> <body> <h1>JavaScript Kurs; Schleifen</h1> <h2>Zusammenzählen aller Zahlen von Zahl "Start" bis Zahl "Ende" (z.B. 1+2+3+ ... +100=?)</h2> <!-- Eingabefelder auf HTML Seite; ID=eingabeStart1 und ID=eingabeEnde1 --> Start: <input type="text" Value=1 id="eingabeStart1" /> Ende: <input type="text" Value=100 id="eingabeEnde1" /> <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript --> <input type="submit" value="Berechnen (for-Schleife)" onclick="Schleife_for();" /> <br> <!-- Ausgabe auf HTML Seite; ID=meinAusgabefeld--> <h3 id="meinAusgabefeld"></h3> </body> </html>

So könnte es aussehen: JS_Kurs_B07.html