Programmierung mit JavaScript
Klaus Becker
2005
1
Programmierung mit JavaScript
2
document:
Dokument
formular:
Formular
:A
eGroesse: Eingabefeld
:A
eGewicht: Eingabefeld
:A
bRechnen: Button
value="Berechnen"
onClick="berechnen()"
:A
aBMI: Eingabefeld
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
}
//-->
</script>
3
Teil 1
Interaktive Web-Seiten
4
Body-Mass-Index
http://www.actifit.ch/ActifitWomenOnly/Pages/bmi.htm
Eingabefeld
Button
5
Body-Mass-Index
Darstellung der Web-Seite
...
<script language="javascript">
...
function detBMI(aWeight, aHeight)
{
aHeight = aHeight / 100;
return Math.round(aWeight/eval(aHeight *
aHeight));
}
Ausschnitt aus dem Quelltext
...
</script>
6
Browser als JavaScript-Interpreter
Der Browser zeigt die ausgelieferte Webseite an und führt das integrierte
JavaScript-Programm (bei Bedarf) aus.
http://www.actifit.ch/
ActifitWomenOnly/Pages/bmi.htm
www.actifit.ch
Fordert ein Dokument an
Browser
(Client)
http
WWW-Server
(Server)
Liefert das Dokument aus
...
<script language="javascript">
...
function detBMI(aWeight, aHeight)
{
aHeight = aHeight / 100;
return Math.round(aWeight/eval(aHeight *
aHeight));
}
...
</script>
...
ActifitWomenOnly/
Pages/bmi.htm
7
Zielsetzung
Ziel ist es, anhand einer vereinfachten Version den Aufbau einer interaktiven
Web-Seite zu verstehen.
Vereinfachte Webseite
8
Quelltext zur Webseite
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>BMI</title>
<script type="text/javascript">
...
</script>
</head>
<body>
<h2>Berechnen Sie Ihren BMI-Wert!</h2>
<form action ="" name="formular">
<p>Groesse (in m): <input type="text" name="eGroesse" value="2.00"></p>
<p>Gewicht (in kg): <input type="text" name="eGewicht" value="100"></p>
<p><input type="button" name="bRechnen" value="Berechnen"
onClick="berechnen()"></p>
<p>BMI: <input type="text" name="aBMI"></p>
</form>
</body>
</html>
9
Struktur der Webseite
<!DOCTYPE
document: HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Dokument
<html>
: Überschrift
<head>
<meta http-equiv="content-type"
content="text/html;
charset=iso-8859-1">
: Zeichen
: Zeichen
... : Zeichen
<title>BMI</title>
<script type="text/javascript">
formular:
Formular
...
eGroesse:
</script>
... : Zeichen
: Absatz
Eingabefeld
</head>
<body>
eGewicht:
<h2>Berechnen Sie Ihren BMI-Wert!</h2>
: Absatz
Eingabefeld
<form action ="" name="formular">
bRechnen:
<p>Groesse (in m): <input type="text" name="eGroesse"
value="2.00"></p>
: Absatz
Button
<p>Gewicht (in kg): <input type="text" name="eGewicht"
value="100"></p>
<p><input type="button" name="bRechnen" value="Berechnen"
aBMI:
onClick="berechnen()"></p> : Absatz
Eingabefeld
<p>BMI: <input type="text" name="aBMI"></p>
</form>
enthält
...
...
</body>
</html>
Objekthierarchie
10
document:
Dokument
<!DOCTYPE HTML ...><html>...</html>
: Überschrift
: Zeichen
formular:
Formular
Objektname
Objekttyp
: Zeichen
...
: Zeichen
<form action =""
name="formular">...</form>
<input type="text"
eGroesse:
:A
Eingabefeld
name="eGroesse"
value="2.00">
<input type="text"
eGewicht:
:A
Eingabefeld
name="eGewicht"
value="100">
<input type="button"
bRechnen:
:A
Button
name="bRechnen" ...>
:A
aBMI:
Eingabefeld
...
<input type="text"
name="aBMI">
enthält
...
Eigenschaften von Objekten
11
document:
Dokument
title =
...
formular:
Formular
<form action =""
name="formular">...</form>
action =
...
:A
eGroesse:
Eingabefeld
value = "2.00"
...
Attribut
<input type="text"
name="eGroesse"
value="2.00">
Attributwert
Ereignisbehandlung
12
document:
Dokument
formular:
Formular
:A
eGroesse: Eingabefeld
:A
eGewicht: Eingabefeld
:A
bRechnen: Button
value="Berechnen"
onClick="berechnen()"
:A
aBMI: Eingabefeld
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
}
//-->
</script>
Wenn der Benutzer auf den Button
drückt, löst er ein Ereignis aus, das vom
sog. „Eventhandler“ bearbeitet wird.
Dieser Eventhandler veranlasst, die
Javascript-Funktion „berechnen()“
auszuführen.
Variablen
13
document:
Dokument
formular:
Formular
:A
eGroesse: Eingabefeld
value = "2.00"
:A
eGewicht: Eingabefeld
value = "100"
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
}
//-->
</script>
groesse:
:A
bRechnen: Button
gewicht:
:A
aBMI: Eingabefeld
value = ""
bmi:
Zugriff auf Attributwerte
14
document:
Dokument
title =
...
formular:
Formular
action =
...
:A
eGroesse:
Eingabefeld
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
}
//-->
</script>
value = "2.00"
...
groesse:
gewicht:
bmi:
document.formular.eGroesse.value : "2.00"
Kopieren der Eingabewerte
15
document:
Dokument
formular:
Formular
:A
eGroesse: Eingabefeld
value = "2.00"
:A
eGewicht: Eingabefeld
value = "100"
:A
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
}
//-->
</script>
groesse: "2.00"
bRechnen: Button
gewicht:
:A
aBMI: Eingabefeld
value = ""
bmi:
"100"
Verarbeitung
16
document:
Dokument
formular:
Formular
:A
eGroesse: Eingabefeld
value = "2.00"
:A
eGewicht: Eingabefeld
value = "100"
:A
:A
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
}
//-->
</script>
groesse: "2.00"
bRechnen: Button
gewicht:
"100"
bmi:
25.0
aBMI: Eingabefeld
value = ""
Kopieren des Ausgabewerts
17
document:
Dokument
formular:
Formular
:A
eGroesse: Eingabefeld
value = "2.00"
:A
eGewicht: Eingabefeld
value = "100"
:A
:A
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
}
//-->
</script>
groesse: "2.00"
bRechnen: Button
gewicht:
"100"
bmi:
25.0
aBMI: Eingabefeld
value = "25.0"
EVA-Prinzip
18
E
V
A
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
// Eingabe
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
// Verarbeitung
bmi = gewicht/(groesse*groesse);
// Ausgabe
document.formular.aBMI.value = bmi;
}
//-->
</script>
Viele Programme lassen sich nach dem EVA-Prinzip entwerfen:
Man versucht, die Verarbeitungsprozesse nach dem Muster „Eingabe,
Verarbeitung, Ausgabe“ zu gliedern.
Algorithmus
19
JavaScript-Programm
Eingabe: groesse, gewicht
bmi = gewicht/(groesse*groesse)
Ausgabe: bmi
Algorithmus
<script type="text/javascript">
<!-var groesse, gewicht, bmi;
function berechnen()
{
// Eingabe
groesse =
document.formular.eGroesse.value;
gewicht =
document.formular.eGewicht.value;
// Verarbeitung
bmi = gewicht/(groesse*groesse);
// Ausgabe
document.formular.aBMI.value = bmi;
}
//-->
</script>
Struktur und Verhalten eines Programms lassen sich oft besser verstehen,
wenn man den zu Grunde liegenden Algorithmus herausstellt.
Algorithmus
20
Algorithmus zur Berechnung des BMI-Werts:
E
Eingabe: groesse, gewicht
V
bmi = gewicht/(groesse*groesse)
A
Ausgabe: bmi
Struktur und Verhalten eines Programms lassen sich oft besser verstehen,
wenn man den zu Grunde liegenden Algorithmus herausstellt.
21
Übung
Ziel ist es, ein interaktives Programm zur Flächeninhaltsberechnung zu
entwickeln.
Verhaltensbeschreibung:
Eingabe: Länge und Breite eines Rechtecks
Ausgabe: Umfang und Flächeninhalt des Rechtecks
Entwerfen Sie zunächst
- eine geeignete Benutzungsoberfläche und
- einen Algorithmus zum gewünschten Verhalten.
Entwickeln Sie anschließend das Programm in Analogie zum BMIProgramm.
22
Übung
Ziel ist es, ein interaktives Programm zur Umrechnung eines EuroBetrags in US-Dollar zu entwickeln.
Entwerfen Sie zunächst
- eine Verhaltensbeschreibung (Eingaben und Ausgaben),
- eine geeignete Benutzungsoberfläche und
- einen Algorithmus zum gewünschten Verhalten.
Entwickeln Sie anschließend das Programm in Analogie zum BMIProgramm.
Hinweis: Aktuelle Kursdaten finden Sie unter http://dollar-kurse.de.
23
Teil 2
Variablenkonzept
24
Mäusepopulation
Wir betrachten die Entwicklung einer Mäusepopulation. Die Population
wird unterteilt in junge Mäuse, erwachsene Mäuse und alte Mäuse. Wir
gehen von den folgenden Annahmen aus:
- In einem Simulationsschritt wird die Hälfte der jungen Mäuse
erwachsen.
- In einem Simulationsschritt erzeugt jede erwachsene Maus (im
Durchschnitt) 4 junge Mäuse. Nur ein Drittel der erwachsenen Mäuse
wird in einem Simulationsschritt alt.
- In einem Simulationsschritt erzeugt jede alte Maus (im Durchschnitt) 2
junge Mäuse. Alle alten Mäuse sterben innerhalb dieses
Simulationsschrittes.
Mäusepopulation
25
jung
erw.
alt
Schritt
6
9
12
0
1/2
4
1/3
2
i  i+1
jung
erw.
alt
Schritt
60
3
3
1
Entwicklung der Mäusepopulation
26
Schritt
Anzahl der
jungen Mäuse
Anzahl der
erw. Mäuse
Anzahl der
alten Mäuse
0
6
9
12
1
60 = 4*9 + 2*12
3 = 6:2
3 = 9:3
2
18 = 4*3 + 2*3
30 = 60:2
1 = 3:3
3
122 = 4*30 + 2*1
9 = 18:2
10 = 30:3
4
56 = 4*9 + 2*10
61 = 122:2
3 = 9:3
5
250 = 4*61 + 2*3
28 = 56:2
20,3.. = 61:3
...
Zielsetzung:
Automatisierung der Berechnung der jeweils nächsten Mäusepopulation
27
Berechnungsmodell
Die zu verarbeitenden Daten werden in Speicherzellen abgelegt und mit
Hilfe von Variablen verwaltet.
Speicherzelle
Schritt
:
0
jung
:
6.0
erwachsen
:
9.0
alt
:
12.0
Variablenname
Variablenwert
{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]}
Variablenzustand
28
Berechnungsmodell
Eine Veränderung eines Speicherzelleninhalts kann mit Hilfe einer
Wertzuweisung (an die entsprechende Variable) erfolgen.
{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [...]}
alt  12.0
Variablenzustand vorher
Wertzuweisung
{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]} Variablenzustand nachher
{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]}
erwachsen  jung / 2
Variablenzustand vorher
Wertzuweisung
{Schritt: [0]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]} Variablenzustand nachher
{Schritt: [0]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]}
Schritt  Schritt +1
Variablenzustand vorher
Wertzuweisung
{Schritt: [1]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]} Variablenzustand nachher
29
Struktur einer Wertzuweisung
Struktur einer Wertzuweisung (vorläufig):
Eine Wertzuweisung besteht aus einer Variablen (der ein Wert zugewiesen
wird) und einem Term (der den zuzuweisenden Wert festlegt).
alt = 12.0
erwachsen = jung / 2
Wertzuweisungen in JavaScript
Schritt = Schritt + 1
Variable  Term
Wertzuweisung - Struktur
30
Auswertung einer Wertzuweisung
Auswertung einer Wertzuweisung:
Der Wert des Terms (rechte Seite der Wertzuweisung) wird bzgl. des
aktuellen Variablenzustands ermittelt und der Variablen (linke Seite der
Wertzuweisung) als neuer Wert zugewiesen. Der Inhalt der zur Variablen
gehörenden Speicherzelle wird dabei überschrieben.
Schritt
:
0
Schritt  Schritt + 1
Variablenzustand vorher
Variable  Term
1
Schritt
:
1
Variablenzustand nachher
31
Berechnung einer neuen Population
vorher
Die eingeführten Variablen beschreiben die Anfangspopulation.
{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]}
nachher
Die Variablen beschreiben die Population nach einem Simulationsschritt.
{Schritt: [1]; jung: [60.0]; erwachsen: [3.0]; alt: [3.0]}
Algorithmus
Schritt  Schritt + 1
jung  erwachsen*4 + alt*2
erwachsen  jung / 2
alt  erwachsen / 3
Problemspezifikation
Vorschlag für einen Algorithmus
Trace-Tabelle
32
Mit Hilfe einer Trace-Tabelle kann man die einzelnen Berechnungsschritte
verfolgen.
Trace-Tabelle
Wertzuweisung
Variablenzustand
Schritt
jung
erw.
alt
0
6.0
9.0
12.0
Schritt  Schritt + 1
1
6.0
9.0
12.0
jung  erwachsen*4 + alt*2
1
60.0
9.0
12.0
erwachsen  jung / 2
1
60.0
30.0
12.0
alt  erwachsen / 3
1
60.0
30.0
10.0
Nicht korrekt!
33
Reihenfolge von Wertzuweisungen
Trace-Tabelle
Wertzuweisung
Variablenzustand
Schritt
jung
erw.
alt
hilf
0
6.0
9.0
12.0
Schritt  Schritt + 1
1
6.0
9.0
12.0
hilf  erwachsen*4 + alt*2
1
6.0
9.0
12.0
60.0
alt  erwachsen / 3
1
6.0
9.0
3.0
60.0
erwachsen  jung / 2
1
6.0
3.0
3.0
60.0
jung  hilf
1
60.0
3.0
3.0
60.0
korrekt!
Beachte:
Bei der Datenverarbeitung mit Hilfe von Wertzuweisungen muss man auf
die Reihenfolge der Wertzuweisungen achten.
Algorithmus
34
Algorithmus zur Berechnung des jeweils nächsten Populationszustands:
E
Eingabe: Schritt, jung, erwachsen, alt
V
Schritt  Schritt + 1
hilf  erwachsen*4 + alt*2
alt  erwachsen / 3
erwachsen  jung / 2
jung  hilf
A
Ausgabe: Schritt, jung, erwachsen, alt
35
Aufgabe
Testen Sie den folgenden Implementierungsversuch (siehe „Maeuse1“).
var Schritt, jung, erwachsen, alt, hilf;
function berechnen()
{
// Eingabe
Schritt = document.formular.eSchritt.value;
jung = document.formular.eJung.value;
erwachsen = document.formular.eErwachsen.value;
alt = document.formular.eAlt.value;
// Verarbeitung
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
// Ausgabe
document.formular.eSchritt.value = Schritt;
document.formular.eJung.value = jung;
document.formular.eErwachsen.value = erwachsen;
document.formular.eAlt.value = alt;
}
36
Aufgabe
Führen Sie das Testprogramm „Typentest“ aus.
Deuten Sie die Ergebnisse.
Wie lässt sich hiermit das fehlerhafte Verhalten des Programms „Maeuse1“
erklären?
Welche Möglichkeiten gibt es, den Fehler zu beheben?
37
Programmtest: Maeuse1
function berechnen()
Hier stimmt etwas nicht!
{
// Eingabe
Schritt = document.formular.eSchritt.value;
jung = document.formular.eJung.value;
erwachsen = document.formular.eErwachsen.value;
alt = document.formular.eAlt.value;
// Verarbeitung
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
// Ausgabe
document.formular.eSchritt.value = Schritt;
document.formular.eJung.value = jung;
document.formular.eErwachsen.value = erwachsen;
document.formular.eAlt.value = alt;
}
38
Programm: Typentest
...
document.write("Deklaration: var a: <br>");
document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");
a = 1;
document.write("Anweisung: a = 1: <br>");
document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");
a = "1";
document.write('Anweisung: a = "1": <br>');
document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");
a = a+1;
document.write("Anweisung: a = a+1: <br>");
document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");
a = a*1;
document.write("Anweisung: a = a*1: <br>");
document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");
a = "1";
document.write('Anweisung: a = "1": <br>');
document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");
a = parseInt(a);
document.write("Anweisung: a = parseInt(a): <br>");
document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>")
...
39
Datentypen
Ein Datentyp legt einen Wertebereich und die Grundoperationen fest, die
mit den Elementen des Wertebereichs durchgeführt werden können.
Datentyp: number (JavaScript)
Datentyp: string (JavaScript)
Der Datentyp number beschreibt
ganze Zahlen wie 1 oder -1 und
Dezimalzahlen wie 3.14 oder -2.1.
Beachte, dass der Wertebereich
insgesamt endlich ist.
Operationen:
3+25
3–21
3*26
3 / 2  1.5
3%21
(Rest bei ganzzahliger Division)
Der Datentyp string beschreibt
Zeichenketten wie "hallo" oder
"Anweisung: a = 2".
Grundoperation:
"2" + "5"  "25" (Konkatenation)
40
Zahl oder Zeichenkette?
...
function berechnen()
Schritt  "0"
{
Schritt = document.formular.eSchritt.value;
jung = document.formular.eJung.value;
erwachsen = document.formular.eErwachsen.value;
alt = document.formular.eAlt.value;
"0" + 1  ?
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
0 + 1  1
alt = erwachsen/3;
erwachsen = jung/2;
"0" + "1"  "01"
jung = hilf;
document.formular.eSchritt.value = Schritt;
document.formular.eJung.value = jung;
document.formular.eErwachsen.value = erwachsen;
document.formular.eAlt.value = alt;
}
...
Zeichenkette
<form action ="" name="formular">
<p>Anzahl der Simulationsschritte:
<input type="text" name="eSchritt" value="0">
</p>
41
Automatische Typumwandlung
...
function berechnen()
{
Schritt = document.formular.eSchritt.value;
jung = document.formular.eJung.value;
erwachsen = document.formular.eErwachsen.value;
alt = document.formular.eAlt.value;
Eingabe: string
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
Umwandlung:
alt = erwachsen/3;
string  number
erwachsen = jung/2;
jung = hilf;
Umwandlung:
document.formular.eSchritt.value = Schritt;
number  string
document.formular.eJung.value = jung;
document.formular.eErwachsen.value = erwachsen;
document.formular.eAlt.value = alt;
}
Ausgabe: string
...
<form action ="" name="formular">
7
<p>Anzahl der Simulationsschritte:
<input type=text name="eSchritt" value="0">
</p>
42
Explizite Typumwandlung
...
parseInt: string  number
function berechnen()
{
Schritt = parseInt(document.formular.eSchritt.value);
jung = parseInt(document.formular.eJung.value);
erwachsen = parseInt(document.formular.eErwachsen.value);
alt = parseInt(document.formular.eAlt.value);
Schritt = Schritt + 1;
Eingabe: string
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
Autom. Umwandlung:
erwachsen = jung/2;
number  string
jung = hilf;
document.formular.eSchritt.value = Schritt;
document.formular.eJung.value = jung;
document.formular.eErwachsen.value = erwachsen;
document.formular.eAlt.value = alt;
Ausgabe: string
}
...
<form action ="" name="formular">
<p>Anzahl der Simulationsschritte:
<input type=text name="eSchritt" value="0">
</p>
43
JavaScript und Typen
JavaScript ist nicht typisiert.
Der Typ einer Variablen wird bei einer Variablendeklaration nicht
festgelegt.
JavaScript wandelt Typen automatisch um.
JavaScript versucht, aus dem Kontext (z. B. durchzuführende Operationen)
zu erschließen, von welchem Typ die zu verarbeitenden Werte sind.
Hierdurch kann es zu automatischen Typumwandlungen kommen.
Vorteil:
Beim Programmieren mit JavaScript muss man sich oft nicht um Typen
kümmern. Das macht die Sache einfacher.
Nachteil:
Fehler sind manchmal schwer zu finden. Die Klarheit leidet durch die nicht
im Text angezeigten Umwandlungsoperationen.
44
Aufgabe
Ergänzen Sie im Programm „Maeuse1“ die erforderlichen
Typumwandlungen.
Testen Sie anschließend das neue Programm.
45
Teil 3
Kontrollstrukturen
46
Bisher: Sequentielle Algorithmen
BMI-Berechnung
Mäusepopulation
Eingabe: gewicht, groesse
Eingabe: Schritt, jung, erwachsen, alt
bmi  gewicht/(groesse*groesse);
Schritt  Schritt + 1
hilf  erwachsen*4 + alt*2
Ausgabe: bmi
alt  erwachsen / 3
erwachsen  jung / 2
jung  hilf
Ausgabe: Schritt, jung, erwachsen, alt
47
Variationen zur BMI-Berechnung
Das Programm zur Berechnung des BMI-Werts soll dem Benutzer weitere
Informationen in Abhängigkeit des berechneten Werts liefern.
48
Zweiseitige Fallunterscheidung
BMI
bmi  gewicht/(groesse*groesse)
bmi < 19
ja
nein
bmi > 26
bewertung
"Untergewicht"
ja
nein
bewertung
"Übergewicht"
bewertung
"Normalgewicht"
49
Zweiseitige Fallunterscheidung
function berechnen()
{
groesse = parseFloat(document.formular.eGroesse.value);
gewicht = parseFloat(document.formular.eGewicht.value);
bmi = gewicht/(groesse*groesse);
if (bmi < 19)
{
bewertung = "Untergewicht";
}
else
{
if (bmi > 26)
{
bewertung = "Übergewicht";
}
else
{
bewertung = "Normalgewicht";
};
};
document.formular.aBMI.value = bmi;
document.formular.aBewertung.value = bewertung;
}
50
Einseitige Fallunterscheidung
BMI
bmi  gewicht/(groesse*groesse)
bewertung "Normalgewicht"
bmi < 19
ja
nein
bewertung
"Untergewicht"
bmi > 26
ja
nein
bewertung
"Übergewicht"
51
Einseitige Fallunterscheidung
function berechnen()
{
groesse = parseFloat(document.formular.eGroesse.value);
gewicht = parseFloat(document.formular.eGewicht.value);
bmi = gewicht/(groesse*groesse);
bewertung = "Normalgewicht";
if (bmi < 19)
{
bewertung = "Untergewicht";
};
if (bmi > 26)
{
bewertung = "Übergewicht";
};
document.formular.aBMI.value = bmi;
document.formular.aBewertung.value = bewertung;
}
Mehrfachauswahl
52
BMI
bmi  Runden(gewicht/(groesse*groesse))
bmi
18
bewertung
"etwas zu
wenig"
19
bewertung
"am unteren
Limit"
20
bewertung
"wenig, aber
ok"
...
...
sonst
bewertung
"außerhalb des
Bereichs"
53
Mehrfachauswahl
function berechnen()
{
groesse = parseFloat(document.formular.eGroesse.value);
gewicht = parseFloat(document.formular.eGewicht.value);
bmi = Math.round(gewicht/(groesse*groesse));
switch (bmi)
{
case 18: bewertung = "etwas zu wenig"; break;
case 19: bewertung = "am unteren Limit"; break;
case 20: bewertung = "wenig, aber ok"; break;
...
default: bewertung = "außerhalb des Bereichs"; break;
};
document.formular.aBMI.value = bmi;
document.formular.aBewertung.value = bewertung;
}
54
Variationen zur Mäusepopulation
Entwicklung der Mäusepopulation:
- In einem Simulationsschritt wird die Hälfte der jungen Mäuse erwachsen.
- In einem Simulationsschritt erzeugt jede erwachsene Maus (im
Durchschnitt) 4 junge Mäuse. Nur ein Drittel der erwachsenen Mäuse wird
in einem Simulationsschritt alt.
- In einem Simulationsschritt erzeugt jede alte Maus (im Durchschnitt) 2
junge Mäuse. Alle alten Mäuse sterben innerhalb dieses Simulationsschritts.
Berechnungsaufgaben:



Berechne die Population nach einer vorgegebenen Anzahl von Schritten.
Berechne, nach wie vielen Schritten die Population eine vorgegebene
Grenze überschreitet.
Berechne, nach wie vielen Schritten die Population einen bestimmten
Wert erreicht.
Zählschleife
55
Berechne die Population nach einer vorgegebenen Anzahl von Schritten.
Mäusepopulation
zaehler  0
SOLANGE (zaehler < 10)
Initialisierung
schritt  schritt + 1
zaehler  0
hilf  erwachsen*4 + alt*2
...
erwachsen jung/2
gesamt  jung+erwachsen+alt
zaehler  zaehler+1
Test
SOLANGE (zaehler < 10)
alt  erwachsen/3
jung  hilf
Mäusepopulation
zaehler  zaehler+1
Aktualisierung
Implementierung
56
Implementierung mit einer while-Anweisung
Mäusepopulation
zaehler  0
SOLANGE (zaehler < 10)
schritt  schritt + 1
hilf  erwachsen*4 + alt*2
alt  erwachsen/3
erwachsen jung/2
jung  hilf
gesamt  jung+erwachsen+alt
zaehler  zaehler+1
Programmausschnitt
...
zaehler = 0;
while (zaehler < 10)
{
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
gesamt = jung + erwachsen + alt;
zaehler = zaehler + 1;
};
...
Implementierung
57
Implementierung mit einer for-Anweisung
...
for (zaehler = 0; zaehler < 10; zaehler = zaehler+1)
{
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
...
gesamt = jung + erwachsen + alt; zaehler = 0;
};
while (zaehler < 10)
...
{
Programmausschnitt
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
gesamt = jung + erwachsen + alt;
zaehler = zaehler + 1;
};
...
Wiederholung mit ...
58
Berechne, nach wie vielen Schritten die Population eine vorgegebene
Grenze überschreitet.
Mäusepopulation
zaehler  0
Anfangsbedingung
SOLANGE (gesamt < grenze)
Mäusepopulation
zaehler  0
hilf  erwachsen*4 + alt*2
hilf  erwachsen*4 + alt*2
alt  erwachsen/3
alt  erwachsen/3
erwachsen jung/2
erwachsen jung/2
jung  hilf
jung  hilf
gesamt  jung+erwachsen+alt
gesamt  jung+erwachsen+alt
zaehler  zaehler+1
zaehler  zaehler+1
SOLANGE (gesamt < grenze)
Endbedingung
59
... Anfangs- bzw. Endbedingung
Erst die Bedingung überprüfen, dann die Anweisungen ausführen!
Bed.
w
WH mit Anfangsbedingung
SOLANGE Bedingung
f
Anw.
Anweisungsf olge
Erst die Anweisungen ausführen, dann die Bedingung überprüfen!
WH mit Endbedingung
Anw.
Anweisungsf olge
SOLANGE Bedingung
w
Bed.
f
Beachte: Die Anweisung wird hier mindestens einmal ausgeführt.
Endbedingungen
60
Austritt aus der Schleife, wenn die Endbedingung nicht mehr erfüllt ist.
WH mit Endbedingung
Anw.
Anweisungsf olge
SOLANGE Bedingung
w
Bed.
f
JavaScript: do {...} while (...);
Austritt aus der Schleife, wenn die Endbedingung erfüllt ist.
WH mit Endbedingung
Anw.
Anweisungsf olge
BIS Bedingung
f
Pascal, Delphi: repeat ... until ...;
Bed.
w
61
Vorsicht: Endlosschleife
Berechne, nach wie vielen Schritten die Population einen bestimmten Wert
erreicht.
Mäusepopulation
zaehler  0
SOLANGE (alt != 100)
hilf  erwachsen*4 + alt*2
alt  erwachsen/3
erwachsen jung/2
jung  hilf
gesamt  jung+erwachsen+alt
zaehler  zaehler+1
Achtung:
Bei bestimmten Eingaben
nicht erfüllbar!
62
Kontrollstrukturen
Kontrollstrukturen dienen dazu, den genauen Ablauf der Verarbeitung
festzulegen. Wichtige Kontrollstrukturen sind die
- Sequenz(bildung),
- Fallunterscheidung,
- Wiederholung.
Hinweise zur Implementierung
63
Sequenz:
{
...
Anweisungen
};
Eine Sequenz von Anweisungen wird durch einen Anweisungsblock
implementiert. Blockanfang und Blockende werden mit Hilfe von
geschweiften Klammern markiert.
Hinweise zur Implementierung
64
Fallunterscheidung (einseitig)
Bedingung
if (...)
{
...
};
Anweisungen
Vergleichsoperatoren (für Zahlen):
==
!=
<
>
<=
>=
(gleich)
(ungleich)
(kleiner)
(größer)
(kleiner oder gleich)
(größer oder gleich)
Fallunterscheidung (zweiseitig)
Bedingung
if (...)
{
...
}
else
{
...
};
Anweisungen
Anweisungen
Hinweise zur Implementierung
65
Wiederholung mit Anfangsbedingung
Wiederholung mit Endbedingung
Bedingung
Anweisungen
while (...)
{
...
};
do
{
...
}
while (...);
Anweisungen
Bedingung
Zählschleife
Initialisierung
Bedingung
for (...; ...; ...)
{
...
Anweisungen
};
Aktualisierung
66
Übungen
Annahmen über die Mäusepopulation:
Sind weniger als 1000 Mäuse in der Population, so verhalten sich die Mäuse wie
bisher:
- In einem Simulationsschritt wird die Hälfte der jungen Mäuse erwachsen.
- In einem Simulationsschritt erzeugt jede erwachsene Maus (im Durchschnitt) 4
junge Mäuse. Nur ein Drittel der erwachsenen Mäuse wird in einem
Simulationsschritt alt.
- In einem Simulationsschritt erzeugt jede alte Maus (im Durchschnitt) 2 junge
Mäuse. Alle alten Mäuse sterben innerhalb dieses Simulationsschrittes.
Ab 1000 Mäuse wird das Futter knapp. Alte Mäuse erzeugen dann keine jungen
Mäuse mehr und jede erwachsene Maus erzeugt (im Durchschnitt) nur noch 1.5
junge Mäuse.
Berücksichtigen Sie die oben dargestellten Veränderungen der Population.
Das Simulationsprogramm soll des weiteren um folgende Eingabe erweitert
werden: Der Benutzer kann die Anzahl der Schritte, die jeweils berechnet
werden, selbst festlegen (z. B. 5 Schritte).
67
Übungen
Der folgende Algorithmus beschreibt das
Heron-Verfahren zur näherungsweisen
Berechnung von Quadratwurzeln.
Implementieren und testen Sie diesen
Algorithmus.
Heron-Verfahren
Eingabe: a, epsilon (beide > 0)
a > 1?
ja
nein
x - a
y - 1
x - 1
y - a
solange (x-y > epsilon)
x - (x+y )/2
y -a/x
Ausgabe: x, x²
Siehe auch:
http://hsg.region-kaiserslautern.de/faecher/inf/javascript/0304/index.php
68
Übungen
Entwickeln und implementieren Sie Algorithmen, mit denen man
- alle Teiler einer eingegebenen natürlichen Zahl bestimmen kann,
- testen kann, ob eine eingegebene Zahl eine Primzahl ist,
- alle Primzahlen bis zu einer eingegebenen Obergrenze bestimmen kann.
Siehe auch:
http://hsg.region-kaiserslautern.de/faecher/inf/javascript/0304/index.php
69
Teil 4
Ereignisgesteuerte Abläufe
70
17 und 4
Ziel ist es, das Spiel „17 und 4“ zu simulieren. Das Spiel soll wie folgt
funktionieren: In jedem Spielzug wird eine Karte mit einer Zahl aus dem
Bereich [1;...;11] bestimmt und auf einen Kartenstapel gelegt. Der Spieler
kann nach jedem Spielzug entscheiden, ob er aufhört oder weiter spielt. Ist
die Summe der Zahlen der Karten des Stapels größer als 21, so hat der
Spieler verloren. Hört der Spieler bei einer Stapelsumme kleiner oder gleich
21 auf, so wird die nächste Karte gezogen. Ist die neue Stapelsumme
immer noch kleiner oder gleich 21, so hat der Spieler verloren, andernfalls
gewonnen.
Spielablauf
71
Karte:
Karte:
Stapel:
0
Stapel:
Karte ziehen
0
Karte ziehen
Karte:
8
Karte:
8
Stapel:
8
Stapel:
8
Karte ziehen
Karte ziehen
Karte:
5
Karte:
5
Stapel:
13
Stapel:
13
Karte ziehen
Karte ziehen
Karte:
4
Karte:
4
Stapel:
17
Stapel:
17
Karte ziehen
Spiel beenden
Karte:
6
Karte:
6
Karte:
3
Stapel:
23
Stapel:
23
Stapel:
20
verloren
gewonnen
verloren
72
Ereignisbearbeitung
Auslösende Aktion
Ausgelöste Aktionen
Mausklick auf Button
„Spiel beginnen“
Stapel wird initialisiert
Mausklick auf Button
„Karte ziehen“
Es wird eine Karte gezogen.
Der Stapel wird aktualisiert.
Wenn Stapel > 21, dann
Ergebis: verloren
Mausklick auf Button
„Spiel beenden“
Es wird eine Karte gezogen.
Der Stapel wird aktualisiert.
Wenn Stapel > 21, dann
Ergebis: gewonnen
sonst
Ergebnis: verloren
73
Aufgabe
Implementieren Sie das Spiel „17 und 4“. Benutzen Sie hierbei das
Programmgerüst in „s17u4v0.html“. Zur Erzeugung von Zufallszahlen
können die folgenden Anweisungen benutzt werden:
zahl = Math.random()*11 + 1;
karte = Math.floor(zahl);
Math.random() erzeugt eine Pseudo-Zufallszahl zwischen 0.0 und 1.0.
Math.random()*11+1 erzeugt eine Pseudo-Zufallszahl zwischen 1.0 und 12.0.
Math.floor(zahl) schneidet die Nachkommastellen ab.
Testen Sie das Programm. Welche Schwierigkeiten zeigen sich?
74
Lösung
function beginnen()
{
stapel = 0;
ergebnis = "";
document.formular.aKarte.value = "";
document.formular.aStapel.value = stapel;
document.formular.aErgebnis.value = ergebnis;
}
75
Lösung
function ziehen()
{
zahl = Math.random()*11 + 1;
karte = Math.floor(zahl);
stapel = stapel + karte;
if (stapel > 21)
{
ergebnis = "verloren";
};
document.formular.aKarte.value = karte;
document.formular.aStapel.value = stapel;
document.formular.aErgebnis.value = ergebnis;
}
76
Lösung
function beenden()
{
zahl = Math.random()*11 + 1;
karte = Math.floor(zahl);
stapel = stapel + karte;
if (stapel > 21)
{
ergebnis = "gewonnen";
}
else
{
ergebnis = "verloren";
};
document.formular.aKarte.value = karte;
document.formular.aStapel.value = stapel;
document.formular.aErgebnis.value = ergebnis;
}
Schwierigkeit
77
Karte:
Stapel:
Ergebnis:
0
Karte ziehen
Karte:
10
Stapel:
10
Ergebnis:
Karte ziehen
Karte:
10
Stapel:
20
Ergebnis:
Spiel beenden
Karte:
4
Stapel:
24
Ergebnis: gewonnen
Karte ziehen
Karte:
6
Stapel:
30
Ergebnis: verloren
Nachdem das Spiel beendet
worden ist, können weitere Karten
gezogen werden. Es kommt dann
zu irritierenden Ausgaben.
Lösungsansatz
78
Karte:
Stapel:
Karte:
Ergebnis:
0
Stapel:
entschieden: false
Ergebnis:
0
Karte ziehen
Karte:
10
Stapel:
10
Ergebnis:
Karte ziehen
Karte:
10
entschieden: false
Stapel:
10
Ergebnis:
Karte ziehen
Karte:
10
Stapel:
20
Ergebnis:
Karte ziehen
Karte:
10
entschieden: false
Stapel:
20
Ergebnis:
Spiel beenden
Karte:
4
Stapel:
24
Ergebnis: gewonnen
Spiel beenden
Karte:
4
entschieden: true
Stapel:
24
Ergebnis: gewonnen
Karte ziehen
Karte:
6
Stapel:
30
Ergebnis: verloren
Karte ziehen
Karte:
4
entschieden: true
Stapel:
24
Ergebnis: gewonnen
79
Ereignisbearbeitung
Auslösende Aktion
Ausgelöste Aktionen
Mausklick auf Button
„Spiel beginnen“
Stapel wird initialisiert
Mausklick auf Button
„Karte ziehen“
Wenn nicht entschieden dann:
Es wird eine Karte gezogen.
Der Stapel wird aktualisiert.
Wenn Stapel > 21, dann
Ergebis: verloren
Mausklick auf Button
„Spiel beenden“
Wenn nicht entschieden dann:
Es wird eine Karte gezogen.
Der Stapel wird aktualisiert.
Wenn Stapel > 21, dann
Ergebis: gewonnen
sonst
Ergebnis: verloren
Datentyp boolean
80
Ein Datentyp legt einen Wertebereich und die Grundoperationen fest, die
mit den Elementen des Wertebereichs durchgeführt werden können.
Datentyp: Wahrheitswert / boolean (JavaScript)
Der Datentyp boolean beschreibt Wahrheitswerte. Die möglichen
Wahrheitswerte sind false und true. Grundoperationen sind die logischen
Verknüpfungen not (js: !), and (js: &&) und or (js: ||). Diese sind wie folgt
festgelegt:
a
NOT a
false
true
true
false
a
b
a AND b
false
false
false
false
true
false
true
false
false
true
true
true
a
b
a OR b
false
false
false
false
true
true
true
false
true
true
true
true
81
Lösung mit boolescher Variablen
var karte, stapel = 0, ergebnis = "", zahl, entschieden = false;
function ziehen()
{
if (! entschieden)
{
zahl = Math.random()*11 + 1;
karte = Math.floor(zahl);
stapel = stapel + karte;
if (stapel > 21)
{
ergebnis = "verloren";
entschieden = true;
};
};
document.formular.aKarte.value = karte;
document.formular.aStapel.value = stapel;
document.formular.aErgebnis.value = ergebnis;
}
boolesche Variablen
82
Aufgabe
Ändere Sie das Programm so ab, dass es das oben spezifizierte Verhalten
aufweist.
83
Teil 5
Unterprogramme
84
Zielsetzung
Wir betrachten noch einmal ein Programme zur Mäusepopulation. Ziel ist
es, dieses Programm neu zu strukturieren.
85
Identische Programmteile
Wir betrachten noch einmal die entwickelten Programme zur
Mäusepopulation. Ziel ist es, diese neu zu strukturieren.
function berechnen1()
{
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3; erwachsen = jung/2; jung = hilf;
gesamt = jung + erwachsen + alt;
document.formular.eSchritt.value = Schritt; Identische
...
Programmteile
function berechnen10()
}
{
zaehler = 0;
while (zaehler < 10)
{
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3; erwachsen = jung/2; jung = hilf;
gesamt = jung + erwachsen + alt;
zaehler = zaehler + 1;
};
document.formular.eSchritt.value = Schritt; ...
}
86
Unterprogramm
function berechnen1()
{
neuePolulation();
document.formular.eSchritt.value = Schritt; ...
}
function berechnen10()
{
zaehler = 0;
while (zaehler < 10)
{
neuePopulation();
zaehler = zaehler + 1;
};
...
}
Ein Unterprogramm kann als
elementare Anweisung in einem
anderen Programmteil benutzt
werden.
function neuePopulation()
{
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
gesamt = jung + erwachsen + alt;
}
87
Lokale Variablen
var schritt, jung, erwachsen, alt, gesamt;
function berechnen1()
{
neuePolulation();
document.formular.eSchritt.value = Schritt; ...
}
function berechnen10()
{
var zaehler;
zaehler = 0;
while (zaehler < 10)
{
neuePopulation();
zaehler = zaehler + 1;
};
...
}
Globale Variablen
Lokale Variable
function neuePopulation()
{
var hilf;
Schritt = Schritt + 1;
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
gesamt = jung + erwachsen + alt;
}
88
Lokale Variablen
var schritt, jung, erwachsen, alt, gesamt;
function berechnen1()
{
neuePolulation();
document.formular.eSchritt.value = Schritt; ...
}
function berechnen10()
{
var zaehler;
zaehler = 0;
while (zaehler < 10)
{
neuePopulation();
zaehler = zaehler + 1;
}; ...
}
Globale Variablen
Lokale Variable
Eine lokale Variable ist eine Variable, die innerhalb eines Unterprogramms
deklariert und benutzt wird. Sie ist nur innerhalb dieses Unterprogramms
zugreifbar und existiert nur, während das Unterprogramm ausgeführt wird.
89
Verschiedene Ein-Schritt-Berechnungen
function berechnen1()
{
Schritt = Schritt + 1;
if (gesamt < 1000)
{
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
gesamt = jung + erwachsen + alt;
}
else
{
hilf = erwachsen*1.5;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
gesamt = jung + erwachsen + alt;
};
document.formular.eSchritt.value = Schritt;
...
}
90
Datenübergabe mit Parametern
function berechnen1()
{
Aktuelle Parameter
if (gesamt < 1000)
(übergebene Daten)
{
neuePopulation(4, 2);
}
else
{
neuePopulation(1.5, 0);
};
document.formular.eSchritt.value = Schritt;
...
}
Mit Hilfe von Parametern kann
man Daten zur Laufzeit an das
betreffende Unterprogramm
übergeben. Bei der Deklaration
werden für die zu übergebenden
Daten Platzhalter (formale
Parameter) eingeführt.
Formale Parameter
(Platzhalter)
function neuePopulation(fErw, fAlt)
{
Schritt = Schritt + 1;
hilf = erwachsen*fErw + alt*fAlt;
alt = erwachsen/3;
erwachsen = jung/2;
jung = hilf;
gesamt = jung + erwachsen + alt;
}
91
Zielsetzung
Das Programm zur Simulation des Spiels „17 und 4“ soll ebenfalls neu
strukturiert werden.
function ziehen()
{
if (! entschieden)
{
zahl = Math.random()*11 + 1;
„Neue Karte ziehen“
karte = Math.floor(zahl);
stapel = stapel + karte;
if (stapel > 21)
{
ergebnis = "verloren";
entschieden = true;
};
};
document.formular.aKarte.value = karte;
document.formular.aStapel.value = stapel;
document.formular.aErgebnis.value = ergebnis;
}
92
Funktion
function neueKarte()
{
return Math.floor(Math.random()*11+1);
}
function ziehen()
{
if (! entschieden)
{
karte = neueKarte();
stapel = stapel + karte;
if (stapel > 21)
{
ergebnis = "verloren";
entschieden = true;
};
};
document.formular.aKarte.value = karte;
document.formular.aStapel.value = stapel;
document.formular.aErgebnis.value = ergebnis;
}
Funktion
(Verarbeitung mit
Rückgabewert)
Prozedur
(Verarbeitung ohne
Rückgabewert)
93
Funktionsaufruf
function neueKarte()
{
return Math.floor(Math.random()*11+1);
}
function ziehen()
{
if (! entschieden)
{
karte = neueKarte();
Funktionsaufruf
stapel = stapel + karte;
if (stapel > 21)
{
ergebnis = "verloren";
entschieden = true;
};
};
document.formular.aKarte.value = karte;
document.formular.aStapel.value = stapel;
document.formular.aErgebnis.value = ergebnis;
}
Funktionsdeklaration
94
Variante: Funktion mit Parametern
function zufallszahl(max)
Formaler Parameter
{
return Math.floor(Math.random()*max+1);
}
function ziehen()
{
if (! entschieden)
Aktueller Parameter
{
karte = zufallszahl(11);
stapel = stapel + karte;
if (stapel > 21)
{
ergebnis = "verloren";
entschieden = true;
};
};
document.formular.aKarte.value = karte;
document.formular.aStapel.value = stapel;
document.formular.aErgebnis.value = ergebnis;
}
95
Variante: Funktion mit Parametern
function zufallszahl(max)
Formaler Parameter
{
return Math.floor(Math.random()*max+1);
}
function neueKarte()
{
return zufallszahl(11);
}
function ziehen()
{
if (! entschieden)
{
karte = neueKarte();
stapel = stapel + karte;
if (stapel > 21)
{
ergebnis = "verloren";
entschieden = true;
};
};
...
Aktueller Parameter
96
Aufgabe
Strukturieren Sie eines Ihrer selbst geschriebenen Programme mit Hilfe von
Unterprogrammen.
97
Teil 6
Die Datenstruktur Reihung
98
Ziel
Beim Spiel „17 und 4“ erfolgte die Simulation des Kartenziehens mit Hilfe
eines Zufallsgenerators. Zu überprüfen wäre vorab, ob dieser
Zufallsgenerator die benötigten Zufallszahlen auch fair erzeugt, d. h. ob auf
lange Sicht alle gewünschten Zahlen in etwa gleich häufig auftreten. Ziel ist
es, zur Überprüfung dieser Form von Fairness ein Testprogramm zu
entwickeln. Mit Hilfe dieses Programms sollen nach und nach Zufallszahlen
aus einem bestimmten Bereich (z. B. 0..9) erzeugt werden und es soll eine
Statistik angefertigt werden, wie oft welche Zahl dabei vorkommt.
Datenmodellierung
99
anzahl0:
2
anzahl1:
2
anzahl2:
21
anzahl3:
25
anzahl4:
33
anzahl5:
43
anzahl6:
45
anzahl7:
33
anzahl8:
43
anzahl9:
45
100
Initialisierung der Statistik
function initialisieren()
{
anzahl0 = 0;
anzahl1 = 0;
anzahl2 = 0;
anzahl3 = 0;
anzahl4 = 0;
anzahl5 = 0;
anzahl6 = 0;
anzahl7 = 0;
anzahl8 = 0;
anzahl9 = 0;
document.formular.a0.value
document.formular.a1.value
document.formular.a2.value
document.formular.a3.value
document.formular.a4.value
document.formular.a5.value
document.formular.a6.value
document.formular.a7.value
document.formular.a8.value
document.formular.a9.value
}
=
=
=
=
=
=
=
=
=
=
anzahl0;
anzahl1;
anzahl2;
anzahl3;
anzahl4;
anzahl5;
anzahl6;
anzahl7;
anzahl8;
anzahl9;
101
Erzeugung einer Zufallszahl
function erzeugen()
{
var zahl = zufallszahl(0,9);
if (zahl == 0) {anzahl0 = anzahl0+1;};
if (zahl == 1) {anzahl1 = anzahl1+1;};
if (zahl == 2) {anzahl2 = anzahl2+1;};
if (zahl == 3) {anzahl3 = anzahl3+1;};
if (zahl == 4) {anzahl4 = anzahl4+1;};
if (zahl == 5) {anzahl5 = anzahl5+1;};
if (zahl == 6) {anzahl6 = anzahl6+1;};
if (zahl == 7) {anzahl7 = anzahl7+1;};
if (zahl == 8) {anzahl8 = anzahl8+1;};
if (zahl == 9) {anzahl9 = anzahl9+1;};
document.formular.a0.value = anzahl0;
document.formular.a1.value = anzahl1;
document.formular.a2.value = anzahl2;
document.formular.a3.value = anzahl3;
document.formular.a4.value = anzahl4;
document.formular.a5.value = anzahl5;
document.formular.a6.value = anzahl6;
document.formular.a7.value = anzahl7;
...
}
Reihung
102
Idee: Gleichartige Daten werden zu einer Einheit zusammengefasst.
anzahl0:
30
anzahl1:
27
anzahl2:
21
anzahl3:
25
anzahl4:
33
anzahl5:
43
anzahl6:
45
anzahl7:
31
anzahl8:
40
anzahl9:
45
Reihung
anzahl:
Element
30
27
21
25
33
43
45
31
40
45
0
1
2
3
4
5
6
7
8
9
Index
Erzeugung eines Array-Objekts in
JavaScript
var anzahl = new Object();
103
Zugriff auf die Elemente
Reihung
anzahl:
Element
30
27
21
25
33
43
45
31
40
45
0
1
2
3
4
5
6
7
8
9
Index
anzahl[3] = 0;
anzahl[4] = anzahl[4]+1;
for (var i = 0; i < 10; i = i+1)
{
anzahl[i] = 0;
};
var zahl = zufallszahl(0,9);
anzahl[zahl] = anzahl[zahl] + 1;
104
Initialisierung der Statistik
function initialisieren()
{
for (var i = 0; i < 10; i = i+1)
{
anzahl[i] = 0;
};
document.formular.a0.value = anzahl0;
document.formular.a1.value = anzahl1;
document.formular.a2.value = anzahl2;
document.formular.a3.value = anzahl3;
document.formular.a4.value = anzahl4;
document.formular.a5.value = anzahl5;
document.formular.a6.value = anzahl6;
document.formular.a7.value = anzahl7;
document.formular.a8.value = anzahl8;
document.formular.a9.value = anzahl9;
}
105
Formularelemente als Array
document.formular.a0
document.formular.elements[0]
<body>
<form action
<p>0: <input
<p>1: <input
<p>2: <input
<p>3: <input
<p>4: <input
<p>5: <input
<p>6: <input
<p>7: <input
<p>8: <input
<p>9: <input
...
</form>
</body>
="" name="formular">
type="text" name="a0"></p>
type="text" name="a1"></p>
type="text" name="a2"></p>
type="text" name="a3"></p>
type="text" name="a4"></p>
type="text" name="a5"></p>
type="text" name="a6"></p>
type="text" name="a7"></p>
type="text" name="a8"></p>
type="text" name="a9"></p>
106
Verarbeitung
function initialisieren()
{
for (var i = 0; i < 10; i = i+1)
{
anzahl[i] = 0;
};
for (var i = 0; i < 10; i = i+1)
{
document.formular.elements[i].value = anzahl[i];
};
}
function erzeugen()
{
var zahl = zufallszahl(0,9);
anzahl[zahl] = anzahl[zahl] + 1;
document.formular.elements[zahl].value = anzahl[zahl];
}
107
Aufgabe
Entwickeln Sie ein Programm, das zunächst 10 Zufallszahlen aus einem
vorher festgelegten Bereich (z. B. {0, ..., 99}) erzeugt und anschließend
diese Zahlenfolge wie folgt auswertet:
- Wie groß ist das arithmetische Mittel der Zahlen?
- Welches ist die kleinste Zahl?
- Welches ist die größte Zahl?
- Welche Zahlen kommen mehrfach vor?
- Wie lautet die längste aufsteigend sortierte Teilfolge?
108
Literaturhinweise
Schulbücher:
T. H. Krebs und B. Krebs: Web-Seiten mit HTML und JavaScript. Cornelsen
2002.
Internet:
K. Merkert: Materialien zur Programmierung mit JavaScript im Wahlfach
Informatik.
http://hsg.region-kaiserslautern.de/faecher/inf/javascript/0304/index.php
W. Rockenbach: ITG und JavaScript.
http://informatikag.bildung-rp.de/html/body_ideenskizzen.html

Powerpoint-Präsentation