Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Programmierung mit JavaScript
Klaus Becker 2005
2
Programmierung mit JavaScript
<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> document: Dokument formular: Formular : A eGroesse: Eingabefeld : A eGewicht: Eingabefeld : A bRechnen: Button value="Berechnen" onClick="berechnen()" : A aBMI: Eingabefeld
3
Interaktive Web-Seiten
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)); } ... </script> ... Ausschnitt aus dem Quelltext
6
Browser als JavaScript-Interpreter
Der Browser zeigt die ausgelieferte Webseite an und führt das integrierte JavaScript-Programm (bei Bedarf) aus. ActifitWomenOnly/Pages/bmi.htm Fordert ein Dokument an Browser (Client) WWW-Server (Server) http 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
Vereinfachte Webseite
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" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <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 HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <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> document: Dokument : Überschrift ... : Zeichen : Zeichen : Zeichen formular: Formular eGroesse: Eingabefeld ... : Absatz : Zeichen eGewicht: Eingabefeld : Absatz bRechnen: Button : Absatz aBMI: Eingabefeld : Absatz enthält ... ...
10
Objekthierarchie document: Dokument <!DOCTYPE HTML ...><html>...</html> : Überschrift ... : Zeichen : Zeichen : Zeichen formular: Formular <form action ="" name="formular">...</form> eGroesse: Eingabefeld <input type="text" name="eGroesse" value="2.00"> : A Objektname Objekttyp eGewicht: Eingabefeld <input type="text" name="eGewicht" value="100"> : A bRechnen: Button <input type="button" name="bRechnen" ...> : A aBMI: Eingabefeld <input type="text" name="aBMI"> : A enthält ... ...
11
Eigenschaften von Objekten
document: Dokument title = ... formular: Formular <form action ="" name="formular">...</form> action = ... eGroesse: Eingabefeld : A <input type="text" name="eGroesse" value="2.00"> value = "2.00" ... Attribut Attributwert
12
Ereignisbehandlung <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> document: Dokument formular: Formular : A eGroesse: Eingabefeld : A eGewicht: 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. : A bRechnen: Button value="Berechnen" onClick="berechnen()" : A aBMI: Eingabefeld
13
Variablen <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> document: Dokument formular: Formular eGroesse: Eingabefeld : A value = "2.00" eGewicht: Eingabefeld : A value = "100" groesse: : A bRechnen: Button gewicht: aBMI: Eingabefeld : A bmi: value = ""
14
Zugriff auf Attributwerte
<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> document: Dokument title = ... formular: Formular action = ... eGroesse: Eingabefeld : A groesse: value = "2.00" ... gewicht: bmi: document.formular.eGroesse.value : "2.00"
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> document: Dokument formular: Formular eGroesse: Eingabefeld : A value = "2.00" eGewicht: Eingabefeld : A value = "100" groesse: "2.00" : A bRechnen: Button gewicht: "100" aBMI: Eingabefeld : A bmi: value = ""
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> document: Dokument formular: Formular eGroesse: Eingabefeld : A value = "2.00" eGewicht: Eingabefeld : A value = "100" groesse: "2.00" : A bRechnen: Button gewicht: "100" aBMI: Eingabefeld : A bmi: 25.0 value = ""
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> document: Dokument formular: Formular eGroesse: Eingabefeld : A value = "2.00" eGewicht: Eingabefeld : A value = "100" groesse: "2.00" : A bRechnen: Button gewicht: "100" aBMI: Eingabefeld : A bmi: 25.0 value = "25.0"
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> E V A Viele Programme lassen sich nach dem EVA-Prinzip entwerfen: Man versucht, die Verarbeitungsprozesse nach dem Muster „Eingabe, Verarbeitung, Ausgabe“ zu gliedern.
19
Algorithmus JavaScript-Programm <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 Struktur und Verhalten eines Programms lassen sich oft besser verstehen, wenn man den zu Grunde liegenden Algorithmus herausstellt.
20
Algorithmus E V A Algorithmus zur Berechnung des BMI-Werts:
Eingabe: groesse, gewicht bmi = gewicht/(groesse*groesse) Ausgabe: bmi V A 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 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
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 Schritt 1/2 4 1/3 2 i i+1 jung
1/2 4 1/3 2 i i+1 jung 60 erw. 3 alt 3 Schritt 1
26
Entwicklung der Mäusepopulation
Schritt Anzahl der Anzahl der Anzahl der jungen Mäuse erw. Mäuse alten Mäuse 1 60 = 4*9 + 2*12 3 = 6:2 3 = 9:3 2 18 = 4*3 + 2* = 60:2 1 = 3:3 3 122 = 4*30 + 2*1 9 = 18:2 10 = 30:3 4 56 = 4*9 + 2* = 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 : 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: [...]} Variablenzustand vorher alt 12.0 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]} Variablenzustand vorher erwachsen jung / 2 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]} Variablenzustand vorher Schritt Schritt +1 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 : Variablenzustand vorher Schritt Schritt + 1 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]} Problemspezifikation Algorithmus Schritt Schritt + 1 jung erwachsen*4 + alt*2 erwachsen jung / 2 alt erwachsen / 3 Vorschlag für einen Algorithmus
32
Trace-Tabelle Mit Hilfe einer Trace-Tabelle kann man die einzelnen Berechnungsschritte verfolgen. Trace-Tabelle Wertzuweisung Schritt Schritt + 1 jung erwachsen*4 + alt*2 erwachsen jung / 2 alt erwachsen / 3 Variablenzustand Schritt jung erw. alt Nicht korrekt!
33
Reihenfolge von Wertzuweisungen
Trace-Tabelle Wertzuweisung Schritt Schritt + 1 hilf erwachsen*4 + alt*2 alt erwachsen / 3 erwachsen jung / 2 jung hilf Variablenzustand Schritt jung erw. alt hilf korrekt! Beachte: Bei der Datenverarbeitung mit Hilfe von Wertzuweisungen muss man auf die Reihenfolge der Wertzuweisungen achten.
34
Algorithmus Algorithmus zur Berechnung des jeweils nächsten Populationszustands: E 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 V A
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
Hier stimmt etwas nicht!
Programmtest: Maeuse1 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; } Hier stimmt etwas nicht!
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>"); a = "1"; document.write('Anweisung: a = "1": <br>'); a = a+1; document.write("Anweisung: a = a+1: <br>"); a = a*1; document.write("Anweisung: a = a*1: <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) Der Datentyp number beschreibt ganze Zahlen wie 1 oder -1 und Dezimalzahlen wie 3.14 oder Beachte, dass der Wertebereich insgesamt endlich ist. Operationen: 5 3 – 2 1 3 * 2 6 3 / 2 % 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
Zahl oder Zeichenkette?
... 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> Schritt "0" "0" + 1 ? 0 + 1 1 "0" + "1" "01" Zeichenkette
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; 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> Eingabe: string Umwandlung: string number Umwandlung: number string Ausgabe: string 7
42
Explizite Typumwandlung
... 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> parseInt: string number Eingabe: string Autom. Umwandlung: number string Ausgabe: 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
BMI-Berechnung Mäusepopulation Eingabe: gewicht, groesse bmi gewicht/(groesse*groesse); Ausgabe: bmi 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
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
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"; bewertung = "Normalgewicht"; }; document.formular.aBMI.value = bmi; document.formular.aBewertung.value = bewertung;
50
Einseitige Fallunterscheidung
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
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.
55
Zählschleife Berechne die Population nach einer vorgegebenen Anzahl von Schritten. Initialisierung Test Aktualisierung
56
Implementierung Implementierung mit einer while-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; }; ...
57
Implementierung 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) { Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; zaehler = zaehler + 1; }; ... Programmausschnitt
58
Wiederholung mit ... Berechne, nach wie vielen Schritten die Population eine vorgegebene Grenze überschreitet. Anfangsbedingung Endbedingung
59
... Anfangs- bzw. Endbedingung
Erst die Bedingung überprüfen, dann die Anweisungen ausführen! f Bed. w Anw. Erst die Anweisungen ausführen, dann die Bedingung überprüfen! Anw. Bed. w f Beachte: Die Anweisung wird hier mindestens einmal ausgeführt.
60
Endbedingungen Austritt aus der Schleife, wenn die Endbedingung nicht mehr erfüllt ist. Anw. Bed. w f JavaScript: do {...} while (...); Austritt aus der Schleife, wenn die Endbedingung erfüllt ist. Anw. Bed. f w Pascal, Delphi: repeat ... until ...;
61
Vorsicht: Endlosschleife
Berechne, nach wie vielen Schritten die Population einen bestimmten Wert erreicht. 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 (einseitig) Fallunterscheidung (zweiseitig) Bedingung Bedingung if (...) { }; if (...) { } else { }; Anweisungen Anweisungen Anweisungen Vergleichsoperatoren (für Zahlen): == (gleich) != (ungleich) < (kleiner) > (größer) <= (kleiner oder gleich) >= (größer oder gleich)
65
Hinweise zur Implementierung
Wiederholung mit Anfangsbedingung Wiederholung mit Endbedingung Bedingung Anweisungen while (...) { }; do { } while (...); Anweisungen Bedingung Zählschleife Initialisierung Bedingung Aktualisierung for (...; ...; ...) { }; Anweisungen
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. Siehe auch:
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:
69
Ereignisgesteuerte Abläufe
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: Karte: Stapel: 0 Stapel: 0 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;
77
Schwierigkeit Karte: Stapel: 0 Ergebnis: Karte ziehen Karte: 10 Stapel: 10 Ergebnis: Karte ziehen Karte: 10 Stapel: 20 Ergebnis: Spiel beenden Nachdem das Spiel beendet worden ist, können weitere Karten gezogen werden. Es kommt dann zu irritierenden Ausgaben. Karte: 4 Stapel: 24 Ergebnis: gewonnen Karte ziehen Karte: 6 Stapel: 30 Ergebnis: verloren
78
Lösungsansatz Karte: Karte: entschieden: false Stapel: 0 Ergebnis:
Karte ziehen Karte ziehen Karte: 10 Karte: 10 entschieden: false Stapel: 10 Ergebnis: Stapel: 10 Ergebnis: Karte ziehen Karte ziehen Karte: 10 Karte: 10 entschieden: false Stapel: 20 Ergebnis: Stapel: 20 Ergebnis: Spiel beenden Spiel beenden Karte: 4 Karte: 4 entschieden: true Stapel: 24 Ergebnis: gewonnen Stapel: 24 Ergebnis: gewonnen Karte ziehen Karte ziehen Karte: 6 Karte: 4 entschieden: true Stapel: 30 Ergebnis: verloren 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
80
Datentyp boolean 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 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; }; ... } 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 var schritt, jung, erwachsen, alt, gesamt;
Globale Variablen function berechnen1() { neuePolulation(); document.formular.eSchritt.value = Schritt; ... } function berechnen10() { var zaehler; zaehler = 0; while (zaehler < 10) neuePopulation(); zaehler = zaehler + 1; }; ... } 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; Globale Variablen function berechnen1() { neuePolulation(); document.formular.eSchritt.value = Schritt; ... } function berechnen10() { var zaehler; zaehler = 0; while (zaehler < 10) neuePopulation(); zaehler = zaehler + 1; }; ... } 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; }; 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; ... Aktuelle Parameter (übergebene Daten) 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; } 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.
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 neueKarte() {
return Math.floor(Math.random()*11+1); } Funktion (Verarbeitung mit Rückgabewert) 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; } Prozedur (Verarbeitung ohne Rückgabewert)
93
Funktionsdeklaration
Funktionsaufruf function neueKarte() { return Math.floor(Math.random()*11+1); } Funktionsdeklaration 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; } Funktionsaufruf
94
Variante: Funktion mit Parametern
function zufallszahl(max) { return Math.floor(Math.random()*max+1); } Formaler Parameter 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; } Aktueller Parameter
95
Variante: Funktion mit Parametern
function zufallszahl(max) { return Math.floor(Math.random()*max+1); } Formaler Parameter function neueKarte() { return zufallszahl(11); } Aktueller Parameter function ziehen() { if (! entschieden) karte = neueKarte(); stapel = stapel + karte; if (stapel > 21) ergebnis = "verloren"; entschieden = true; }; ...
96
Aufgabe Strukturieren Sie eines Ihrer selbst geschriebenen Programme mit Hilfe von Unterprogrammen.
97
Die Datenstruktur Reihung
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 anzahl0: anzahl1: anzahl2: anzahl3: anzahl4:
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 = 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
Erzeugung eines Array-Objekts in JavaScript
Reihung Idee: Gleichartige Daten werden zu einer Einheit zusammengefasst. anzahl0: 30 anzahl1: 27 anzahl2: 21 Reihung anzahl3: 25 Element anzahl4: 33 anzahl: 30 27 21 25 33 43 45 31 40 45 anzahl5: 43 1 2 3 4 5 6 7 8 9 anzahl6: 45 Index anzahl7: 31 anzahl8: 40 anzahl9: 45 Erzeugung eines Array-Objekts in JavaScript var anzahl = new Object();
103
Zugriff auf die Elemente
Reihung Element anzahl: 30 27 21 25 33 43 45 31 40 45 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 ="" 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>
106
Verarbeitung function initialisieren() {
for (var i = 0; i < 10; i = i+1) anzahl[i] = 0; }; 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. W. Rockenbach: ITG und JavaScript.
Ähnliche Präsentationen
