Programmierung mit JavaScript Klaus Becker 2005
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
Interaktive Web-Seiten Teil 1 Interaktive Web-Seiten
Body-Mass-Index http://www.actifit.ch/ActifitWomenOnly/Pages/bmi.htm Eingabefeld Button
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
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) 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
Vereinfachte Webseite Zielsetzung Ziel ist es, anhand einer vereinfachten Version den Aufbau einer interaktiven Web-Seite zu verstehen. Vereinfachte Webseite
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>
Struktur der 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> document: Dokument : Überschrift ... : Zeichen : Zeichen : Zeichen formular: Formular eGroesse: Eingabefeld ... : Absatz : Zeichen eGewicht: Eingabefeld : Absatz bRechnen: Button : Absatz aBMI: Eingabefeld : Absatz enthält ... ...
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 ... ...
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
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
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 = ""
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"
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 = ""
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 = ""
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"
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.
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.
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.
Ü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.
Ü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.
Teil 2 Variablenkonzept
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 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
Entwicklung der Mäusepopulation Schritt Anzahl der Anzahl der Anzahl der jungen Mäuse erw. Mäuse 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
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
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
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
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
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
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 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 Nicht korrekt!
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 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 korrekt! Beachte: Bei der Datenverarbeitung mit Hilfe von Wertzuweisungen muss man auf die Reihenfolge der Wertzuweisungen achten.
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
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; }
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?
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!
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>")
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 5 3 – 2 1 3 * 2 6 3 / 2 1.5 3 % 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)
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
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
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
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.
Aufgabe Ergänzen Sie im Programm „Maeuse1“ die erforderlichen Typumwandlungen. Testen Sie anschließend das neue Programm.
Teil 3 Kontrollstrukturen
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
Variationen zur BMI-Berechnung Das Programm zur Berechnung des BMI-Werts soll dem Benutzer weitere Informationen in Abhängigkeit des berechneten Werts liefern.
Zweiseitige Fallunterscheidung
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;
Einseitige Fallunterscheidung
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
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; }
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 Berechne die Population nach einer vorgegebenen Anzahl von Schritten. Initialisierung Test Aktualisierung
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; }; ...
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
Wiederholung mit ... Berechne, nach wie vielen Schritten die Population eine vorgegebene Grenze überschreitet. Anfangsbedingung Endbedingung
... 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.
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 ...;
Vorsicht: Endlosschleife Berechne, nach wie vielen Schritten die Population einen bestimmten Wert erreicht. Achtung: Bei bestimmten Eingaben nicht erfüllbar!
Kontrollstrukturen Kontrollstrukturen dienen dazu, den genauen Ablauf der Verarbeitung festzulegen. Wichtige Kontrollstrukturen sind die - Sequenz(bildung), - Fallunterscheidung, - Wiederholung.
Hinweise zur Implementierung Sequenz: { ... }; Anweisungen Eine Sequenz von Anweisungen wird durch einen Anweisungsblock implementiert. Blockanfang und Blockende werden mit Hilfe von geschweiften Klammern markiert.
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)
Hinweise zur Implementierung Wiederholung mit Anfangsbedingung Wiederholung mit Endbedingung Bedingung Anweisungen while (...) { ... }; do { ... } while (...); Anweisungen Bedingung Zählschleife Initialisierung Bedingung Aktualisierung for (...; ...; ...) { ... }; Anweisungen
Ü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).
Übungen Der folgende Algorithmus beschreibt das Heron-Verfahren zur näherungsweisen Berechnung von Quadratwurzeln. Implementieren und testen Sie diesen Algorithmus. Siehe auch: http://hsg.region-kaiserslautern.de/faecher/inf/javascript/0304/index.php
Ü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
Ereignisgesteuerte Abläufe Teil 4 Ereignisgesteuerte Abläufe
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 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
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
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?
Lösung function beginnen() { stapel = 0; ergebnis = ""; document.formular.aKarte.value = ""; document.formular.aStapel.value = stapel; document.formular.aErgebnis.value = ergebnis; }
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; }
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 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
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
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 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
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
Aufgabe Ändere Sie das Programm so ab, dass es das oben spezifizierte Verhalten aufweist.
Teil 5 Unterprogramme
Zielsetzung Wir betrachten noch einmal ein Programme zur Mäusepopulation. Ziel ist es, dieses Programm neu zu strukturieren.
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; ... }
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.
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; }
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.
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; ...
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.
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“
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)
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
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
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; }; ...
Aufgabe Strukturieren Sie eines Ihrer selbst geschriebenen Programme mit Hilfe von Unterprogrammen.
Die Datenstruktur Reihung Teil 6 Die Datenstruktur Reihung
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 anzahl0: anzahl1: anzahl2: anzahl3: anzahl4: 21 anzahl3: 25 anzahl4: 33 anzahl5: 43 anzahl6: 45 anzahl7: 33 anzahl8: 43 anzahl9: 45
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; }
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; ... }
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();
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;
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; }
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>
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]; }
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?
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