document: Dokument formular: Formular : A eGroesse: Eingabefeld : A eGewicht: Eingabefeld : A bRechnen: Button value="Berechnen" onClick="berechnen()" : A aBMI: Eingabefeld">

Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Programmierung mit JavaScript

Ähnliche Präsentationen


Präsentation zum Thema: "Programmierung mit JavaScript"—  Präsentation transkript:

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 document: Dokument. formular: Formular. : A. eGroesse: Eingabefeld. : A. eGewicht: Eingabefeld. : A. bRechnen: Button. value= Berechnen onClick= berechnen() : A. aBMI: Eingabefeld.", "width": "800" }

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 ... Ausschnitt aus dem Quelltext.", "width": "800" }

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 ... ActifitWomenOnly/ Pages/bmi.htm.", "width": "800" }

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" "http://www.w3.org/TR/html4/strict.dtd"> <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>

Berechnen Sie Ihren BMI-Wert!

Groesse (in m):

Gewicht (in kg):

BMI:

", "width": "800" }

9 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 "> <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 ... ...

Berechnen Sie Ihren BMI-Wert!

Groesse (in m):

Gewicht (in kg):

BMI:

document: Dokument. : Überschrift. ... : Zeichen. : Zeichen. : Zeichen. formular: Formular. eGroesse: Eingabefeld. ... : Absatz. : Zeichen. eGewicht: Eingabefeld. : Absatz. bRechnen: Button. : Absatz. aBMI: Eingabefeld. : Absatz. enthält. ... ...", "width": "800" }

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 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.", "width": "800" }

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 = "" 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 =", "width": "800" }

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" document: Dokument. title = ... formular: Formular. action = ... eGroesse: Eingabefeld. : A. groesse: value = 2.00 ... gewicht: bmi: document.formular.eGroesse.value : 2.00", "width": "800" }

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 = "" 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 =", "width": "800" }

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 = "" 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 =", "width": "800" }

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" 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", "width": "800" }

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. E. V. A. Viele Programme lassen sich nach dem EVA-Prinzip entwerfen: Man versucht, die Verarbeitungsprozesse nach dem Muster „Eingabe, Verarbeitung, Ausgabe zu gliedern.", "width": "800" }

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. 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.", "width": "800" }

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.


Herunterladen ppt "Programmierung mit JavaScript"

Ähnliche Präsentationen


Google-Anzeigen