Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

1 Programmierung mit JavaScript Klaus Becker 2005.

Ähnliche Präsentationen


Präsentation zum Thema: "1 Programmierung mit JavaScript Klaus Becker 2005."—  Präsentation transkript:

1 1 Programmierung mit JavaScript Klaus Becker 2005

2 2 Programmierung mit JavaScript document: Dokument formular: Formular : AeGroesse: Eingabefeld bRechnen: Button : AeGewicht: Eingabefeld : A value="Berechnen" onClick= "berechnen()" : AaBMI: Eingabefeld

3 3 Teil 1 Interaktive Web-Seiten

4 4 Body-Mass-Index Eingabefeld Button

5 5 Body-Mass-Index function detBMI(aWeight, aHeight) { aHeight = aHeight / 100; return Math.round(aWeight/eval(aHeight * aHeight)); } Darstellung der Web-Seite Ausschnitt aus dem Quelltext

6 6 Browser als JavaScript-Interpreter Browser (Client) WWW-Server (Server) Fordert ein Dokument an Liefert das Dokument aus ActifitWomenOnly/ Pages/bmi.htm http Der Browser zeigt die ausgelieferte Webseite an und führt das integrierte JavaScript-Programm (bei Bedarf) aus function detBMI(aWeight, aHeight) { aHeight = aHeight / 100; return Math.round(aWeight/eval(aHeight * aHeight)); } ActifitWomenOnly/Pages/bmi.htm

7 7 Zielsetzung Ziel ist es, anhand einer vereinfachten Version den Aufbau einer interaktiven Web-Seite zu verstehen. Vereinfachte Webseite

8 8 BMI... Berechnen Sie Ihren BMI-Wert! Groesse (in m): Gewicht (in kg): BMI: Quelltext zur Webseite

9 9 BMI... Berechnen Sie Ihren BMI-Wert! Groesse (in m): Gewicht (in kg): BMI: Struktur der Webseite document: Dokument : Überschrift formular: Formular : Absatz eGroesse: Eingabefeld eGewicht: Eingabefeld bRechnen: Button aBMI: Eingabefeld : Absatz : Zeichen... : Absatz : Zeichen... : Zeichen... enthält

10 10 document: Dokument Objekthierarchie : Überschrift formular: Formular eGroesse: Eingabefeld eGewicht: Eingabefeld bRechnen: Button aBMI: Eingabefeld : Zeichen... enthält : Zeichen... : Zeichen... : A Objekttyp Objektname

11 11 Eigenschaften von Objekten eGroesse: Eingabefeld... : A value = "2.00"... formular: Formular action =... document: Dokument title =... Attribut Attributwert

12 12 Ereignisbehandlung document: Dokument formular: Formular : AeGroesse: Eingabefeld bRechnen: Button : AeGewicht: Eingabefeld : A value="Berechnen" onClick= "berechnen()" : AaBMI: Eingabefeld Wenn der Benutzer auf den Button drückt, löst er ein Ereignis aus, das vom sog. Eventhandler bearbeitet wird. Dieser Eventhandler veranlasst, die Javascript-Funktion berechnen() auszuführen.

13 13 Variablen document: Dokument formular: Formular : A eGroesse: Eingabefeld value = "2.00" eGewicht: Eingabefeld value = "100" aBMI: Eingabefeld value = "" bRechnen: Button groesse: gewicht: bmi: : A

14 14 Zugriff auf Attributwerte eGroesse: Eingabefeld value = "2.00"... formular: Formular action =... document: Dokument title =... document.formular.eGroesse.value : "2.00" groesse: gewicht: bmi: : A

15 15 Kopieren der Eingabewerte groesse: "2.00" gewicht: "100" bmi: document: Dokument formular: Formular : A eGroesse: Eingabefeld value = "2.00" eGewicht: Eingabefeld value = "100" aBMI: Eingabefeld value = "" bRechnen: Button : A

16 16 Verarbeitung groesse: "2.00" gewicht: "100" bmi: 25.0 document: Dokument formular: Formular : A eGroesse: Eingabefeld value = "2.00" eGewicht: Eingabefeld value = "100" aBMI: Eingabefeld value = "" bRechnen: Button : A

17 17 Kopieren des Ausgabewerts groesse: "2.00" gewicht: "100" bmi: 25.0 document: Dokument formular: Formular : A eGroesse: Eingabefeld value = "2.00" eGewicht: Eingabefeld value = "100" aBMI: Eingabefeld value = "25.0" bRechnen: Button : A

18 18 EVA-Prinzip Viele Programme lassen sich nach dem EVA-Prinzip entwerfen: Man versucht, die Verarbeitungsprozesse nach dem Muster Eingabe, Verarbeitung, Ausgabe zu gliedern. E V A

19 19 Algorithmus Eingabe: groesse, gewicht bmi = gewicht/(groesse*groesse) Ausgabe: bmi Algorithmus JavaScript-Programm Struktur und Verhalten eines Programms lassen sich oft besser verstehen, wenn man den zu Grunde liegenden Algorithmus herausstellt.

20 20 Algorithmus Eingabe: groesse, gewicht bmi = gewicht/(groesse*groesse) Ausgabe: bmi E V A Algorithmus zur Berechnung des BMI-Werts: Struktur und Verhalten eines Programms lassen sich oft besser verstehen, wenn man den zu Grunde liegenden Algorithmus herausstellt.

21 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 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 23 Teil 2 Variablenkonzept

24 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 25 Mäusepopulation jung 6 erw. 9 alt 12 jung 60 erw. 3 alt 3 1/21/3 42 Schritt 0 Schritt 1 i i+1

26 26 Entwicklung der Mäusepopulation SchrittAnzahl der Anzahl derAnzahl der jungen Mäuseerw. Mäusealten Mäuse = 4*9 + 2*123 = 6:23 = 9:3 218 = 4*3 + 2*3 30 = 60:21 = 3: = 4*30 + 2*1 9 = 18:210 = 30:3 456 = 4*9 + 2*10 61 = 122:23 = 9: = 4*61 + 2*3 28 = 56:220,3.. = 61:3... Zielsetzung: Automatisierung der Berechnung der jeweils nächsten Mäusepopulation

27 27 Berechnungsmodell Schritt: jung: erwachsen: alt: Die zu verarbeitenden Daten werden in Speicherzellen abgelegt und mit Hilfe von Variablen verwaltet. Variablenname Speicherzelle Variablenwert {Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]} Variablenzustand

28 28 Berechnungsmodell alt 12.0 Variablenzustand vorher Wertzuweisung {Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [...]} Variablenzustand nachher{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]} erwachsen jung / 2 {Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]} {Schritt: [0]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]} Schritt Schritt +1 {Schritt: [0]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]} {Schritt: [1]; jung: [6.0]; erwachsen: [3.0]; alt: [12.0]} Eine Veränderung eines Speicherzelleninhalts kann mit Hilfe einer Wertzuweisung (an die entsprechende Variable) erfolgen. Variablenzustand vorher Wertzuweisung Variablenzustand nachher Variablenzustand vorher Wertzuweisung Variablenzustand nachher

29 29 Struktur einer Wertzuweisung Schritt = Schritt + 1 Struktur einer Wertzuweisung (vorläufig): Eine Wertzuweisung besteht aus einer Variablen (der ein Wert zugewiesen wird) und einem Term (der den zuzuweisenden Wert festlegt). alt = 12.0 erwachsen = jung / 2 Variable Term Wertzuweisung - Struktur Wertzuweisungen in JavaScript

30 30 Auswertung einer Wertzuweisung 0Schritt: Variablenzustand vorher Variable Term Variablenzustand nachher 1 Schritt Schritt + 1 1Schritt: Auswertung einer Wertzuweisung: Der Wert des Terms (rechte Seite der Wertzuweisung) wird bzgl. des aktuellen Variablenzustands ermittelt und der Variablen (linke Seite der Wertzuweisung) als neuer Wert zugewiesen. Der Inhalt der zur Variablen gehörenden Speicherzelle wird dabei überschrieben.

31 31 Berechnung einer neuen Population vorher Die eingeführten Variablen beschreiben die Anfangspopulation. {Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]} nachher Die Variablen beschreiben die Population nach einem Simulationsschritt. {Schritt: [1]; jung: [60.0]; erwachsen: [3.0]; alt: [3.0]} Algorithmus Schritt Schritt + 1 jung erwachsen*4 + alt*2 erwachsen jung / 2 alt erwachsen / 3 Problemspezifikation Vorschlag für einen Algorithmus

32 32 Trace-Tabelle Variablenzustand Schrittjungerw.alt Wertzuweisung Schritt Schritt + 1 jung erwachsen*4 + alt*2 erwachsen jung / 2 alt erwachsen / 3 Trace-Tabelle Mit Hilfe einer Trace-Tabelle kann man die einzelnen Berechnungsschritte verfolgen. Nicht korrekt!

33 33 Reihenfolge von Wertzuweisungen Variablenzustand Schrittjungerw.althilf Wertzuweisung Schritt Schritt + 1 hilf erwachsen*4 + alt*2 alt erwachsen / 3 erwachsen jung / 2 jung hilf Beachte: Bei der Datenverarbeitung mit Hilfe von Wertzuweisungen muss man auf die Reihenfolge der Wertzuweisungen achten. Trace-Tabelle korrekt!

34 34 Algorithmus Eingabe: Schritt, jung, erwachsen, alt Schritt Schritt + 1 hilf erwachsen*4 + alt*2 alt erwachsen / 3 erwachsen jung / 2 jung hilf Ausgabe: Schritt, jung, erwachsen, alt E V A Algorithmus zur Berechnung des jeweils nächsten Populationszustands:

35 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 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 37 function berechnen() { // Eingabe Schritt = document.formular.eSchritt.value; jung = document.formular.eJung.value; erwachsen = document.formular.eErwachsen.value; alt = document.formular.eAlt.value; // Verarbeitung Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; // Ausgabe document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt; } Programmtest: Maeuse1 Hier stimmt etwas nicht!

38 38... document.write("Deklaration: var a: "); document.write("a hat den Datentyp "+typeof(a)+". "); a = 1; document.write("Anweisung: a = 1: "); document.write("a hat den Datentyp "+typeof(a)+". "); a = "1"; document.write('Anweisung: a = "1": '); document.write("a hat den Datentyp "+typeof(a)+". "); a = a+1; document.write("Anweisung: a = a+1: "); document.write("a hat den Datentyp "+typeof(a)+". "); a = a*1; document.write("Anweisung: a = a*1: "); document.write("a hat den Datentyp "+typeof(a)+". "); a = "1"; document.write('Anweisung: a = "1": '); document.write("a hat den Datentyp "+typeof(a)+". "); a = parseInt(a); document.write("Anweisung: a = parseInt(a): "); document.write("a hat den Datentyp "+typeof(a)+". ")... Programm: Typentest

39 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: – * / % 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 40... function berechnen() { Schritt = document.formular.eSchritt.value; jung = document.formular.eJung.value; erwachsen = document.formular.eErwachsen.value; alt = document.formular.eAlt.value; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt; }... Anzahl der Simulationsschritte: Zahl oder Zeichenkette? Zeichenkette "0" + "1" "01" Schritt "0" "0" + 1 ?

41 41... function berechnen() { Schritt = document.formular.eSchritt.value; jung = document.formular.eJung.value; erwachsen = document.formular.eErwachsen.value; alt = document.formular.eAlt.value; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt; }... Anzahl der Simulationsschritte: Automatische Typumwandlung Eingabe: string Umwandlung: string number Umwandlung: number string Ausgabe: string 7

42 42... function berechnen() { Schritt = parseInt(document.formular.eSchritt.value); jung = parseInt(document.formular.eJung.value); erwachsen = parseInt(document.formular.eErwachsen.value); alt = parseInt(document.formular.eAlt.value); Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt; }... Anzahl der Simulationsschritte: Explizite Typumwandlung parseInt: string number Autom. Umwandlung: number string Ausgabe: string Eingabe: string

43 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 44 Aufgabe Ergänzen Sie im Programm Maeuse1 die erforderlichen Typumwandlungen. Testen Sie anschließend das neue Programm.

45 45 Teil 3 Kontrollstrukturen

46 46 Bisher: Sequentielle Algorithmen Eingabe: Schritt, jung, erwachsen, alt Schritt Schritt + 1 hilf erwachsen*4 + alt*2 alt erwachsen / 3 erwachsen jung / 2 jung hilf Ausgabe: Schritt, jung, erwachsen, alt Eingabe: gewicht, groesse bmi gewicht/(groesse*groesse); Ausgabe: bmi BMI-BerechnungMäusepopulation

47 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 48 Zweiseitige Fallunterscheidung

49 49 Zweiseitige Fallunterscheidung function berechnen() { groesse = parseFloat(document.formular.eGroesse.value); gewicht = parseFloat(document.formular.eGewicht.value); bmi = gewicht/(groesse*groesse); if (bmi < 19) { bewertung = "Untergewicht"; } else { if (bmi > 26) { bewertung = "Übergewicht"; } else { bewertung = "Normalgewicht"; }; document.formular.aBMI.value = bmi; document.formular.aBewertung.value = bewertung; }

50 50 Einseitige Fallunterscheidung

51 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 52 Mehrfachauswahl

53 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 54 Variationen zur Mäusepopulation Entwicklung der Mäusepopulation: - In einem Simulationsschritt wird die Hälfte der jungen Mäuse erwachsen. - In einem Simulationsschritt erzeugt jede erwachsene Maus (im Durchschnitt) 4 junge Mäuse. Nur ein Drittel der erwachsenen Mäuse wird in einem Simulationsschritt alt. - In einem Simulationsschritt erzeugt jede alte Maus (im Durchschnitt) 2 junge Mäuse. Alle alten Mäuse sterben innerhalb dieses Simulationsschritts. Berechne die Population nach einer vorgegebenen Anzahl von Schritten. Berechne, nach wie vielen Schritten die Population eine vorgegebene Grenze überschreitet. Berechne, nach wie vielen Schritten die Population einen bestimmten Wert erreicht. Berechnungsaufgaben:

55 55 Zählschleife Initialisierung Test Aktualisierung Berechne die Population nach einer vorgegebenen Anzahl von Schritten.

56 56 Implementierung... zaehler = 0; while (zaehler < 10) { Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; zaehler = zaehler + 1; };... Implementierung mit einer while-Anweisung Programmausschnitt

57 57 Implementierung... for (zaehler = 0; zaehler < 10; zaehler = zaehler+1) { Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; };... Implementierung mit einer for-Anweisung Programmausschnitt... zaehler = 0; while (zaehler < 10) { Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; zaehler = zaehler + 1; };...

58 58 Wiederholung mit... Berechne, nach wie vielen Schritten die Population eine vorgegebene Grenze überschreitet. Anfangsbedingung Endbedingung

59 59... Anfangs- bzw. Endbedingung Bed. Anw. w f Bed. Anw. f w Beachte: Die Anweisung wird hier mindestens einmal ausgeführt. Erst die Bedingung überprüfen, dann die Anweisungen ausführen! Erst die Anweisungen ausführen, dann die Bedingung überprüfen!

60 60 Endbedingungen Bed. Anw. f w JavaScript: do {...} while (...); Bed. Anw. w f Pascal, Delphi: repeat... until...; Austritt aus der Schleife, wenn die Endbedingung nicht mehr erfüllt ist. Austritt aus der Schleife, wenn die Endbedingung erfüllt ist.

61 61 Vorsicht: Endlosschleife Berechne, nach wie vielen Schritten die Population einen bestimmten Wert erreicht. Achtung: Bei bestimmten Eingaben nicht erfüllbar!

62 62 Kontrollstrukturen Kontrollstrukturen dienen dazu, den genauen Ablauf der Verarbeitung festzulegen. Wichtige Kontrollstrukturen sind die - Sequenz(bildung), - Fallunterscheidung, - Wiederholung.

63 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 64 Hinweise zur Implementierung Fallunterscheidung (zweiseitig) Fallunterscheidung (einseitig) Vergleichsoperatoren (für Zahlen): == (gleich) != (ungleich) (größer) =(größer oder gleich) if (...) {... }; Anweisungen Bedingung if (...) {... } else {... }; Anweisungen Bedingung

65 65 Hinweise zur Implementierung Wiederholung mit Anfangsbedingung while (...) {... }; Anweisungen Bedingung Wiederholung mit Endbedingung do {... } while (...); Anweisungen Bedingung Zählschleife for (...;...;...) {... }; Anweisungen InitialisierungBedingungAktualisierung

66 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 67 Übungen Der folgende Algorithmus beschreibt das Heron-Verfahren zur näherungsweisen Berechnung von Quadratwurzeln. Implementieren und testen Sie diesen Algorithmus. Siehe auch:

68 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 69 Teil 4 Ereignisgesteuerte Abläufe

70 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 71 Spielablauf Karte: 8 Stapel: 8 Karte ziehen Karte: 5 Stapel: 13 Karte ziehen Karte: 4 Stapel: 17 Karte ziehen Karte: 6 Stapel: 23 verloren Karte: 6 Stapel: 23 gewonnen Karte: 3 Stapel: 20 verloren Karte: 8 Stapel: 8 Karte ziehen Karte: 5 Stapel: 13 Karte ziehen Karte: 4 Stapel: 17 Spiel beenden Karte ziehen Karte: Stapel: 0 Karte: Stapel: 0

72 72 Ereignisbearbeitung Auslösende AktionAusgelöste Aktionen Mausklick auf Button Karte ziehen Es wird eine Karte gezogen. Der Stapel wird aktualisiert. Wenn Stapel > 21, dann Ergebis: verloren Mausklick auf Button Spiel beenden Es wird eine Karte gezogen. Der Stapel wird aktualisiert. Wenn Stapel > 21, dann Ergebis: gewonnen sonst Ergebnis: verloren Mausklick auf Button Spiel beginnen Stapel wird initialisiert

73 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 Math.floor(zahl) schneidet die Nachkommastellen ab. Testen Sie das Programm. Welche Schwierigkeiten zeigen sich?

74 74 Lösung function beginnen() { stapel = 0; ergebnis = ""; document.formular.aKarte.value = ""; document.formular.aStapel.value = stapel; document.formular.aErgebnis.value = ergebnis; }

75 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 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 77 Schwierigkeit Karte: 10 Stapel: 10 Karte ziehen Karte: 10 Stapel: 20 Spiel beenden Karte: 4 Stapel: 24 Karte ziehen Karte: 6 Stapel: 30 Karte ziehen Karte: Stapel: 0 Ergebnis: gewonnen Ergebnis: verloren Ergebnis: Nachdem das Spiel beendet worden ist, können weitere Karten gezogen werden. Es kommt dann zu irritierenden Ausgaben.

78 78 Lösungsansatz Karte: 10 Stapel: 10 Karte ziehen Karte: 10 Stapel: 20 Spiel beenden Karte: 4 Stapel: 24 Karte ziehen Karte: 4 Stapel: 24 Karte ziehen Karte: Stapel: 0 Ergebnis: gewonnen entschieden: true Ergebnis: gewonnen entschieden: true Ergebnis: entschieden: false Ergebnis: entschieden: false Ergebnis: entschieden: false Karte: 10 Stapel: 10 Karte ziehen Karte: 10 Stapel: 20 Spiel beenden Karte: 4 Stapel: 24 Karte ziehen Karte: 6 Stapel: 30 Karte ziehen Karte: Stapel: 0 Ergebnis: gewonnen Ergebnis: verloren Ergebnis:

79 79 Ereignisbearbeitung Auslösende AktionAusgelöste Aktionen Mausklick auf Button Karte ziehen Wenn nicht entschieden dann: Es wird eine Karte gezogen. Der Stapel wird aktualisiert. Wenn Stapel > 21, dann Ergebis: verloren Mausklick auf Button Spiel beenden Wenn nicht entschieden dann: Es wird eine Karte gezogen. Der Stapel wird aktualisiert. Wenn Stapel > 21, dann Ergebis: gewonnen sonst Ergebnis: verloren Mausklick auf Button Spiel beginnen Stapel wird initialisiert

80 80 Datentyp: Wahrheitswert / boolean (JavaScript) Der Datentyp boolean beschreibt Wahrheitswerte. Die möglichen Wahrheitswerte sind false und true. Grundoperationen sind die logischen Verknüpfungen not (js: !), and (js: &&) und or (js: ||). Diese sind wie folgt festgelegt: Datentyp boolean ab a AND b falsefalsefalse falsetruefalse truefalsefalse truetruetrue aNOT a falsetrue truefalse ab a OR b falsefalsefalse falsetruetrue truefalsetrue truetruetrue Ein Datentyp legt einen Wertebereich und die Grundoperationen fest, die mit den Elementen des Wertebereichs durchgeführt werden können.

81 81 Lösung mit boolescher Variablen function ziehen() { if (! entschieden) { zahl = Math.random()*11 + 1; karte = Math.floor(zahl); stapel = stapel + karte; if (stapel > 21) { ergebnis = "verloren"; entschieden = true; }; document.formular.aKarte.value = karte; document.formular.aStapel.value = stapel; document.formular.aErgebnis.value = ergebnis; } var karte, stapel = 0, ergebnis = "", zahl, entschieden = false; boolesche Variablen

82 82 Aufgabe Ändere Sie das Programm so ab, dass es das oben spezifizierte Verhalten aufweist.

83 83 Teil 5 Unterprogramme

84 84 Zielsetzung Wir betrachten noch einmal ein Programme zur Mäusepopulation. Ziel ist es, dieses Programm neu zu strukturieren.

85 85 Identische Programmteile Wir betrachten noch einmal die entwickelten Programme zur Mäusepopulation. Ziel ist es, diese neu zu strukturieren. function berechnen1() { Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; document.formular.eSchritt.value = Schritt;... } function berechnen10() { zaehler = 0; while (zaehler < 10) { Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; zaehler = zaehler + 1; }; document.formular.eSchritt.value = Schritt;... } Identische Programmteile

86 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 87 Lokale Variablen function berechnen1() { neuePolulation(); document.formular.eSchritt.value = Schritt;... } function berechnen10() { var zaehler; zaehler = 0; while (zaehler < 10) { neuePopulation(); zaehler = zaehler + 1; };... } function neuePopulation() { var hilf; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; } var schritt, jung, erwachsen, alt, gesamt; Globale Variablen Lokale Variable

88 88 Lokale Variablen function berechnen1() { neuePolulation(); document.formular.eSchritt.value = Schritt;... } function berechnen10() { var zaehler; zaehler = 0; while (zaehler < 10) { neuePopulation(); zaehler = zaehler + 1; };... } Eine lokale Variable ist eine Variable, die innerhalb eines Unterprogramms deklariert und benutzt wird. Sie ist nur innerhalb dieses Unterprogramms zugreifbar und existiert nur, während das Unterprogramm ausgeführt wird. var schritt, jung, erwachsen, alt, gesamt; Globale Variablen Lokale Variable

89 89 Verschiedene Ein-Schritt-Berechnungen function berechnen1() { Schritt = Schritt + 1; if (gesamt < 1000) { hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; } else { hilf = erwachsen*1.5; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; }; document.formular.eSchritt.value = Schritt;... }

90 90 Datenübergabe mit Parametern function berechnen1() { if (gesamt < 1000) { neuePopulation(4, 2); } else { neuePopulation(1.5, 0); }; document.formular.eSchritt.value = Schritt;... } function neuePopulation(fErw, fAlt) { Schritt = Schritt + 1; hilf = erwachsen*fErw + alt*fAlt; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; } Mit Hilfe von Parametern kann man Daten zur Laufzeit an das betreffende Unterprogramm übergeben. Bei der Deklaration werden für die zu übergebenden Daten Platzhalter (formale Parameter) eingeführt. Formale Parameter (Platzhalter) Aktuelle Parameter (übergebene Daten)

91 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 92 Funktion function ziehen() { if (! entschieden) { karte = neueKarte(); stapel = stapel + karte; if (stapel > 21) { ergebnis = "verloren"; entschieden = true; }; document.formular.aKarte.value = karte; document.formular.aStapel.value = stapel; document.formular.aErgebnis.value = ergebnis; } function neueKarte() { return Math.floor(Math.random()*11+1); } Funktion (Verarbeitung mit Rückgabewert) Prozedur (Verarbeitung ohne Rückgabewert)

93 93 Funktionsaufruf function ziehen() { if (! entschieden) { karte = neueKarte(); stapel = stapel + karte; if (stapel > 21) { ergebnis = "verloren"; entschieden = true; }; document.formular.aKarte.value = karte; document.formular.aStapel.value = stapel; document.formular.aErgebnis.value = ergebnis; } function neueKarte() { return Math.floor(Math.random()*11+1); } Funktionsdeklaration Funktionsaufruf

94 94 Variante: Funktion mit Parametern function ziehen() { if (! entschieden) { karte = zufallszahl(11); stapel = stapel + karte; if (stapel > 21) { ergebnis = "verloren"; entschieden = true; }; document.formular.aKarte.value = karte; document.formular.aStapel.value = stapel; document.formular.aErgebnis.value = ergebnis; } function zufallszahl(max) { return Math.floor(Math.random()*max+1); } Formaler Parameter Aktueller Parameter

95 95 Variante: Funktion mit Parametern function ziehen() { if (! entschieden) { karte = neueKarte(); stapel = stapel + karte; if (stapel > 21) { ergebnis = "verloren"; entschieden = true; };... function zufallszahl(max) { return Math.floor(Math.random()*max+1); } Formaler Parameter Aktueller Parameter function neueKarte() { return zufallszahl(11); }

96 96 Aufgabe Strukturieren Sie eines Ihrer selbst geschriebenen Programme mit Hilfe von Unterprogrammen.

97 97 Teil 6 Die Datenstruktur Reihung

98 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 99 Datenmodellierung 21 anzahl2: 2 anzahl1: 33 anzahl4: 25 anzahl3: 45 anzahl6: 43 anzahl5: 33 anzahl7: 45 anzahl9: 43 anzahl8: 2 anzahl0:

100 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 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 102 Reihung 21 anzahl2: 27 anzahl1: 33 anzahl4: 25 anzahl3: 45 anzahl6: 43 anzahl5: 27 anzahl: Reihung Index 31 anzahl7: 45 anzahl9: 40 anzahl8: 30 anzahl0: Idee: Gleichartige Daten werden zu einer Einheit zusammengefasst. Element var anzahl = new Object(); Erzeugung eines Array-Objekts in JavaScript

103 103 Zugriff auf die Elemente 27 anzahl: Reihung Index Element for (var i = 0; i < 10; i = i+1) { anzahl[i] = 0; }; anzahl[3] = 0; anzahl[4] = anzahl[4]+1; var zahl = zufallszahl(0,9); anzahl[zahl] = anzahl[zahl] + 1;

104 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 105 Formularelemente als Array document.formular.elements[0] 0: 1: 2: 3: 4: 5: 6: 7: 8: 9:... document.formular.a0

106 106 Verarbeitung function initialisieren() { for (var i = 0; i < 10; i = i+1) { anzahl[i] = 0; }; for (var i = 0; i < 10; i = i+1) { document.formular.elements[i].value = anzahl[i]; }; } function erzeugen() { var zahl = zufallszahl(0,9); anzahl[zahl] = anzahl[zahl] + 1; document.formular.elements[zahl].value = anzahl[zahl]; }

107 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 108 Literaturhinweise Schulbücher: T. H. Krebs und B. Krebs: Web-Seiten mit HTML und JavaScript. Cornelsen Internet: K. Merkert: Materialien zur Programmierung mit JavaScript im Wahlfach Informatik. W. Rockenbach: ITG und JavaScript.


Herunterladen ppt "1 Programmierung mit JavaScript Klaus Becker 2005."

Ähnliche Präsentationen


Google-Anzeigen