Upload
annaliese-kempel
View
111
Download
0
Embed Size (px)
Citation preview
1
Programmierung mit JavaScript
Klaus Becker
2005
2 Programmierung mit JavaScript
document:Dokument
formular:Formular
: 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>bRechnen: Button
: A eGewicht: Eingabefeld
: A
value="Berechnen" onClick="berechnen()"
: A aBMI: Eingabefeld
3 Teil 1
Interaktive Web-Seiten
4 Body-Mass-Index
http://www.actifit.ch/ActifitWomenOnly/Pages/bmi.htm
Eingabefeld
Button
5 Body-Mass-Index
...<script language="javascript">...function detBMI(aWeight, aHeight) { aHeight = aHeight / 100; return Math.round(aWeight/eval(aHeight * aHeight));}... </script>...
Darstellung der Web-Seite
Ausschnitt aus dem Quelltext
6 Browser als JavaScript-Interpreter
Browser
(Client)
WWW-Server
(Server)
Fordert ein Dokument an
Liefert das Dokument aus
www.actifit.ch
ActifitWomenOnly/Pages/bmi.htm
http
Der Browser zeigt die ausgelieferte Webseite an und führt das integrierte JavaScript-Programm (bei Bedarf) aus.
...<script language="javascript">...function detBMI(aWeight, aHeight) { aHeight = aHeight / 100; return Math.round(aWeight/eval(aHeight * aHeight));}... </script>...
http://www.actifit.ch/ActifitWomenOnly/Pages/bmi.htm
7 Zielsetzung
Ziel ist es, anhand einer vereinfachten Version den Aufbau einer interaktiven Web-Seite zu verstehen.
Vereinfachte Webseite
8
<!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>
Quelltext zur Webseite
9
<!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>
Struktur der Webseite
document:Dokument
: Überschrift
formular:Formular
: Absatz
: Absatz
eGroesse:EingabefeldeGewicht:EingabefeldbRechnen:Button
aBMI:Eingabefeld
: Absatz
: Zeichen
: Zeichen...
: Absatz
: Zeichen ... : Zeichen
......enthält
10
document:Dokument
Objekthierarchie
: Überschrift
formular:Formular
eGroesse:EingabefeldeGewicht:EingabefeldbRechnen:Button
aBMI:Eingabefeld
: Zeichen
......enthält
: Zeichen ... : Zeichen
<!DOCTYPE HTML ...><html>...</html>
<form action ="" name="formular">...</form>: A
: A
: A
: A
<input type="text" name="eGroesse" value="2.00"><input type="text" name="eGewicht" value="100"><input type="button" name="bRechnen" ...>
<input type="text" name="aBMI">
Objekttyp
Objektname
11 Eigenschaften von Objekten
eGroesse:Eingabefeld
<form action ="" name="formular">...</form>
: A<input type="text" name="eGroesse" value="2.00">
value = "2.00" ...
formular:Formular
action = ...
document:Dokument
title = ...
Attribut Attributwert
12 Ereignisbehandlung
document:Dokument
formular:Formular
: 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>bRechnen: Button
: A eGewicht: Eingabefeld
: A
value="Berechnen" onClick="berechnen()"
: A aBMI: Eingabefeld
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.
13 Variablen
document:Dokument
formular:Formular
: A eGroesse: Eingabefeldvalue = "2.00"
<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>
eGewicht: Eingabefeldvalue = "100"
aBMI: Eingabefeld
value = ""
bRechnen: Buttongroesse:
gewicht:
bmi:
: A
: A
: A
14 Zugriff auf Attributwerte
eGroesse:Eingabefeldvalue = "2.00" ...
formular:Formular
action = ...
document:Dokument
title = ...
document.formular.eGroesse.value : "2.00"
<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:
gewicht:
bmi:
: A
15 Kopieren der Eingabewerte
<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"
gewicht: "100"
bmi:
document:Dokument
formular:Formular
: A eGroesse: Eingabefeldvalue = "2.00"
eGewicht: Eingabefeldvalue = "100"
aBMI: Eingabefeld
value = ""
bRechnen: Button
: A
: A
: A
16 Verarbeitung
<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"
gewicht: "100"
bmi: 25.0
document:Dokument
formular:Formular
: A eGroesse: Eingabefeldvalue = "2.00"
eGewicht: Eingabefeldvalue = "100"
aBMI: Eingabefeld
value = ""
bRechnen: Button
: A
: A
: A
17 Kopieren des Ausgabewerts
<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"
gewicht: "100"
bmi: 25.0
document:Dokument
formular:Formular
: A eGroesse: Eingabefeldvalue = "2.00"
eGewicht: Eingabefeldvalue = "100"
aBMI: Eingabefeld
value = "25.0"
bRechnen: Button
: A
: A
: A
18 EVA-Prinzip
<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.
E
V
A
19 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>
Eingabe: groesse, gewicht
bmi = gewicht/(groesse*groesse)
Ausgabe: bmi
Algorithmus
JavaScript-Programm
Struktur und Verhalten eines Programms lassen sich oft besser verstehen, wenn man den zu Grunde liegenden Algorithmus herausstellt.
20 Algorithmus
Eingabe: groesse, gewicht
bmi = gewicht/(groesse*groesse)
Ausgabe: bmi
E
V
A
Algorithmus zur Berechnung des BMI-Werts:
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 RechtecksAusgabe: 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 BMI-Programm.
22 Übung
Ziel ist es, ein interaktives Programm zur Umrechnung eines Euro-Betrags 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 BMI-Programm.
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.
25 Mäusepopulation
jung
6
erw.
9
alt
12
jung
60
erw.
3
alt
3
1/2 1/34 2
Schritt
0
Schritt
1
i i+1
26 Entwicklung der Mäusepopulation
Schritt Anzahl der Anzahl der Anzahl derjungen Mäuse erw. Mäuse alten Mäuse
0 6 9 12
1 60 = 4*9 + 2*12 3 = 6:2 3 = 9:32 18 = 4*3 + 2*3 30 = 60:2 1 = 3:33 122 = 4*30 + 2*1 9 = 18:2 10 = 30:34 56 = 4*9 + 2*10 61 = 122:2 3 = 9:35 250 = 4*61 + 2*3 28 = 56:2 20,3.. = 61:3
...
Zielsetzung: Automatisierung der Berechnung der jeweils nächsten Mäusepopulation
27 Berechnungsmodell
0
6.0
9.0
12.0
Schritt :
jung :
erwachsen :
alt :
Die zu verarbeitenden Daten werden in Speicherzellen abgelegt und mit Hilfe von Variablen verwaltet.
Variablenname
Speicherzelle
Variablenwert
{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]} Variablenzustand
28 Berechnungsmodell
alt 12.0
Variablenzustand vorher
Wertzuweisung
{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [...]}
Variablenzustand nachher{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]}
erwachsen jung / 2
{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]}
{Schritt: [0]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]}
Schritt Schritt +1
{Schritt: [0]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]}
{Schritt: [1]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]}
Eine Veränderung eines Speicherzelleninhalts kann mit Hilfe einer Wertzuweisung (an die entsprechende Variable) erfolgen.
Variablenzustand vorher
Wertzuweisung
Variablenzustand nachher
Variablenzustand vorher
Wertzuweisung
Variablenzustand nachher
29 Struktur einer Wertzuweisung
Schritt = Schritt + 1
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
Variable Term Wertzuweisung - Struktur
Wertzuweisungen in JavaScript
30 Auswertung einer Wertzuweisung
0Schritt : Variablenzustand vorher
Variable Term
Variablenzustand nachher
1
Schritt Schritt + 1
1Schritt :
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.
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
32 Trace-Tabelle
Variablenzustand
Schritt jung erw. alt
0 6.0 9.0 12.0
1 6.0 9.0 12.0
1 60.0 9.0 12.0
1 60.0 30.0 12.0
1 60.0 30.0 10.0
Wertzuweisung
Schritt Schritt + 1
jung erwachsen*4 + alt*2
erwachsen jung / 2
alt erwachsen / 3
Trace-Tabelle
Mit Hilfe einer Trace-Tabelle kann man die einzelnen Berechnungsschritte verfolgen.
Nicht korrekt!
33 Reihenfolge von Wertzuweisungen
Variablenzustand
Schritt jung erw. alt hilf
0 6.0 9.0 12.0
1 6.0 9.0 12.0
1 6.0 9.0 12.0 60.0
1 6.0 9.0 3.0 60.0
1 6.0 3.0 3.0 60.0
1 60.0 3.0 3.0 60.0
Wertzuweisung
Schritt Schritt + 1
hilf erwachsen*4 + alt*2
alt erwachsen / 3
erwachsen jung / 2
jung hilf
Beachte: Bei der Datenverarbeitung mit Hilfe von Wertzuweisungen muss man auf die Reihenfolge der Wertzuweisungen achten.
Trace-Tabelle
korrekt!
34 Algorithmus
Eingabe: Schritt, jung, erwachsen, alt
Schritt Schritt + 1
hilf erwachsen*4 + alt*2
alt erwachsen / 3
erwachsen jung / 2
jung hilf
Ausgabe: Schritt, jung, erwachsen, alt
E
V
A
Algorithmus zur Berechnung des jeweils nächsten Populationszustands:
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
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;}
Programmtest: Maeuse1
Hier stimmt etwas nicht!
38
...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>")...
Programm: Typentest
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)
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 53 – 2 13 * 2 63 / 2 1.53 % 2 1 (Rest bei ganzzahliger Division)
Datentyp: string (JavaScript)
Der Datentyp string beschreibt Zeichenketten wie "hallo" oder "Anweisung: a = 2". Grundoperation: "2" + "5" "25" (Konkatenation)
40
...function berechnen(){ Schritt = document.formular.eSchritt.value; jung = document.formular.eJung.value; erwachsen = document.formular.eErwachsen.value; alt = document.formular.eAlt.value; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt;}...<form action ="" name="formular"><p>Anzahl der Simulationsschritte: <input type="text" name="eSchritt" value="0"></p>
Zahl oder Zeichenkette?
Zeichenkette
"0" + "1" "01"
Schritt "0"
"0" + 1 ?
0 + 1 1
41
...function berechnen(){ Schritt = document.formular.eSchritt.value; jung = document.formular.eJung.value; erwachsen = document.formular.eErwachsen.value; alt = document.formular.eAlt.value; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt;}...<form action ="" name="formular"><p>Anzahl der Simulationsschritte: <input type=text name="eSchritt" value="0"></p>
Automatische Typumwandlung
Eingabe: string
Umwandlung: string number
Umwandlung: number string
Ausgabe: string7
42
...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; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt;}...<form action ="" name="formular"><p>Anzahl der Simulationsschritte: <input type=text name="eSchritt" value="0"></p>
Explizite Typumwandlung
parseInt: string number
Autom. Umwandlung:
number string
Ausgabe: string
Eingabe: string
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
Eingabe: Schritt, jung, erwachsen, alt
Schritt Schritt + 1
hilf erwachsen*4 + alt*2
alt erwachsen / 3
erwachsen jung / 2
jung hilf
Ausgabe: Schritt, jung, erwachsen, alt
Eingabe: gewicht, groesse
bmi gewicht/(groesse*groesse);
Ausgabe: bmi
BMI-Berechnung Mäusepopulation
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 < 19ja nein
bewertung
"Untergewicht"
bmi > 26ja 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 < 19ja nein
bewertung
"Untergewicht"
bmi > 26ja 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;}
52 Mehrfachauswahl
BMI
bmi Runden(gewicht/(groesse*groesse))
bmi
18 19 20 ... sonst
bewertung
"etwas zu
wenig"
bewertung
"am unteren
Limit"
bewertung
"wenig, aber
ok"
...
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.
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.
Berechnungsaufgaben:
55
Mäusepopulation
zaehler 0
SOLANGE (zaehler < 10)
...
zaehler zaehler+1
Zählschleife
Initialisierung
Test
Aktualisierung
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
Berechne die Population nach einer vorgegebenen Anzahl von Schritten.
56 Implementierung
...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 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
57 Implementierung
...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;};...
Implementierung mit einer for-Anweisung
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;};...
58 Wiederholung mit ...
Berechne, nach wie vielen Schritten die Population eine vorgegebene Grenze überschreitet.
Mäusepopulation
zaehler 0
SOLANGE (gesamt < grenze)
hilf erwachsen*4 + alt*2
alt erwachsen/3
erwachsen jung/2
jung hilf
gesamt jung+erwachsen+alt
zaehler zaehler+1
Mäusepopulation
zaehler 0
SOLANGE (gesamt < grenze)
hilf erwachsen*4 + alt*2
alt erwachsen/3
erwachsen jung/2
jung hilf
gesamt jung+erwachsen+alt
zaehler zaehler+1
Anfangsbedingung
Endbedingung
59 ... Anfangs- bzw. Endbedingung
Bed.
Anw.
w
f
Bed.
Anw.
fw
Beachte: Die Anweisung wird hier mindestens einmal ausgeführt.
WH mit Anfangsbedingung
SOLANGE Bedingung
Anweisungsfolge
WH mit Endbedingung
SOLANGE Bedingung
Anweisungsfolge
Erst die Bedingung überprüfen, dann die Anweisungen ausführen!
Erst die Anweisungen ausführen, dann die Bedingung überprüfen!
60 Endbedingungen
Bed.
Anw.
fw
JavaScript: do {...} while (...);
WH mit Endbedingung
SOLANGE Bedingung
Anweisungsfolge
Bed.
Anw.
wf
Pascal, Delphi: repeat ... until ...;
WH mit Endbedingung
BIS Bedingung
Anweisungsfolge
Austritt aus der Schleife, wenn die Endbedingung nicht mehr erfüllt ist.
Austritt aus der Schleife, wenn die Endbedingung erfüllt ist.
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.
63 Hinweise zur Implementierung
Sequenz:
Anweisungen{ ...};
Eine Sequenz von Anweisungen wird durch einen Anweisungsblock implementiert. Blockanfang und Blockende werden mit Hilfe von geschweiften Klammern markiert.
64 Hinweise zur Implementierung
Fallunterscheidung (zweiseitig)
Fallunterscheidung (einseitig)
Vergleichsoperatoren (für Zahlen):
== (gleich)!= (ungleich)< (kleiner)> (größer)<= (kleiner oder gleich)>= (größer oder gleich)
if (...){ ...};
Anweisungen
Bedingung
if (...){ ...}else{ ...};
Anweisungen
Anweisungen
Bedingung
65 Hinweise zur Implementierung
Wiederholung mit Anfangsbedingung
while (...){ ...};
Anweisungen
Bedingung
Wiederholung mit Endbedingung
do{ ...}while (...);
Anweisungen
Bedingung
Zählschleife
for (...; ...; ...){ ...};
Anweisungen
Initialisierung
Bedingung
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.
71 Spielablauf
Karte: 8
Stapel: 8
Karte ziehen
Karte: 5
Stapel: 13
Karte ziehen
Karte: 4
Stapel: 17
Karte ziehen
Karte: 6
Stapel: 23
verloren
Karte: 6
Stapel: 23
gewonnen
Karte: 3
Stapel: 20
verloren
Karte: 8
Stapel: 8
Karte ziehen
Karte: 5
Stapel: 13
Karte ziehen
Karte: 4
Stapel: 17
Spiel beenden
Karte ziehen Karte ziehen
Karte:
Stapel: 0
Karte:
Stapel: 0
72 Ereignisbearbeitung
Auslösende Aktion Ausgelöste Aktionen
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: gewonnensonst Ergebnis: verloren
Mausklick auf Button „Spiel beginnen“
Stapel wird initialisiert
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;}
77 Schwierigkeit
Karte: 10
Stapel: 10
Karte ziehen
Karte: 10
Stapel: 20
Spiel beenden
Karte: 4
Stapel: 24
Karte ziehen
Karte: 6
Stapel: 30
Karte ziehen
Karte:
Stapel: 0
Ergebnis: gewonnen
Ergebnis: verloren
Ergebnis:
Ergebnis:
Ergebnis:
Nachdem das Spiel beendet worden ist, können weitere Karten gezogen werden. Es kommt dann zu irritierenden Ausgaben.
78 Lösungsansatz
Karte: 10
Stapel: 10
Karte ziehen
Karte: 10
Stapel: 20
Spiel beenden
Karte: 4
Stapel: 24
Karte ziehen
Karte: 4
Stapel: 24
Karte ziehen
Karte:
Stapel: 0
Ergebnis: gewonnen
entschieden: true
Ergebnis: gewonnen
entschieden: true
Ergebnis:
entschieden: false
Ergebnis:
entschieden: false
Ergebnis:
entschieden: false
Karte: 10
Stapel: 10
Karte ziehen
Karte: 10
Stapel: 20
Spiel beenden
Karte: 4
Stapel: 24
Karte ziehen
Karte: 6
Stapel: 30
Karte ziehen
Karte:
Stapel: 0
Ergebnis: gewonnen
Ergebnis: verloren
Ergebnis:
Ergebnis:
Ergebnis:
79 Ereignisbearbeitung
Auslösende Aktion Ausgelöste Aktionen
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
Mausklick auf Button „Spiel beginnen“
Stapel wird initialisiert
80
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:
Datentyp boolean
a b a AND b
false false falsefalse true falsetrue false falsetrue true true
a NOT a
false truetrue false
a b a OR b
false false falsefalse true truetrue false truetrue true true
Ein Datentyp legt einen Wertebereich und die Grundoperationen fest, die mit den Elementen des Wertebereichs durchgeführt werden können.
81 Lösung mit boolescher Variablen
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;}
var karte, stapel = 0, ergebnis = "", zahl, entschieden = false;
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; ...} 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; ...}
Identische Programmteile
Identische Programmteile
86 Unterprogramm
function berechnen1(){ neuePolulation(); document.formular.eSchritt.value = Schritt; ...}
function berechnen10(){ zaehler = 0; while (zaehler < 10) { neuePopulation(); zaehler = zaehler + 1; }; ...}
function neuePopulation(){ Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt;}
Ein Unterprogramm kann als elementare Anweisung in einem anderen Programmteil benutzt werden.
87 Lokale Variablen
function berechnen1(){ neuePolulation(); document.formular.eSchritt.value = Schritt; ...}
function berechnen10(){ var zaehler; zaehler = 0; while (zaehler < 10) { neuePopulation(); zaehler = zaehler + 1; }; ...}
function neuePopulation(){ var hilf; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt;}
var schritt, jung, erwachsen, alt, gesamt; Globale Variablen
Lokale Variable
88 Lokale Variablen
function berechnen1(){ neuePolulation(); document.formular.eSchritt.value = Schritt; ...}
function berechnen10(){ var zaehler; zaehler = 0; while (zaehler < 10) { neuePopulation(); zaehler = zaehler + 1; }; ...}
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.
var schritt, jung, erwachsen, alt, gesamt; Globale Variablen
Lokale Variable
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(){ if (gesamt < 1000) { neuePopulation(4, 2); } else { neuePopulation(1.5, 0); }; document.formular.eSchritt.value = Schritt; ...}
function neuePopulation(fErw, fAlt){ Schritt = Schritt + 1; hilf = erwachsen*fErw + alt*fAlt; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt;}
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)
Aktuelle Parameter(übergebene Daten)
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; 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;}
„Neue Karte ziehen“
92 Funktion
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;}
function neueKarte(){ return Math.floor(Math.random()*11+1);}
Funktion(Verarbeitung mit
Rückgabewert)
Prozedur(Verarbeitung ohne
Rückgabewert)
93 Funktionsaufruf
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;}
function neueKarte(){ return Math.floor(Math.random()*11+1);}
Funktionsdeklaration
Funktionsaufruf
94 Variante: Funktion mit Parametern
function ziehen(){ if (! entschieden) { 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;}
function zufallszahl(max){ return Math.floor(Math.random()*max+1);}
Formaler Parameter
Aktueller Parameter
95 Variante: Funktion mit Parametern
function ziehen(){ if (! entschieden) { karte = neueKarte(); stapel = stapel + karte; if (stapel > 21) { ergebnis = "verloren"; entschieden = true; }; };...
function zufallszahl(max){ return Math.floor(Math.random()*max+1);}
Formaler Parameter
Aktueller Parameterfunction neueKarte(){ return zufallszahl(11);}
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.
99 Datenmodellierung
21
anzahl2:
2anzahl1:
33
anzahl4:
25
anzahl3:
45
anzahl6:
43
anzahl5:
33
anzahl7:
45
anzahl9:
43
anzahl8:
2anzahl0:
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 = 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;}
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; ...}
102 Reihung
21
anzahl2:
27
anzahl1:
33
anzahl4:
25
anzahl3:
45
anzahl6:
43
anzahl5:27
anzahl: 21
25
33
43
451 2 3 4 5 6
Reihung
Index31
anzahl7:
45
anzahl9:
40
anzahl8:
30
anzahl0:
300
31
40
457 8 9
Idee: Gleichartige Daten werden zu einer Einheit zusammengefasst.
Element
var anzahl = new Object();
Erzeugung eines Array-Objekts in JavaScript
103 Zugriff auf die Elemente
27
anzahl: 21
25
33
43
451 2 3 4 5 6
Reihung
Index
300
31
40
457 8 9
Element
for (var i = 0; i < 10; i = i+1){ anzahl[i] = 0;};
anzahl[3] = 0;anzahl[4] = anzahl[4]+1;
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.elements[0]
<body><form action ="" name="formular"><p>0: <input type="text" name="a0"></p><p>1: <input type="text" name="a1"></p><p>2: <input type="text" name="a2"></p><p>3: <input type="text" name="a3"></p><p>4: <input type="text" name="a4"></p><p>5: <input type="text" name="a5"></p><p>6: <input type="text" name="a6"></p><p>7: <input type="text" name="a7"></p><p>8: <input type="text" name="a8"></p><p>9: <input type="text" name="a9"></p>...</form></body>
document.formular.a0
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