Programmierung mit JavaScript

1

Programmierung mit JavaScript

2 Programmierung mit JavaScript

document:Dokument

formular:Formular

: A eGroesse: Eingabefeld

<script type="text/javascript"></script>bRechnen: Button

: A eGewicht: Eingabefeld

: A

value="Berechnen" onClick="berechnen()"

: A aBMI: Eingabefeld

3 Teil 1

Interaktive Web-Seiten

4 Body-Mass-Index

http://www.actifit.ch/ActifitWomenOnly/Pages/bmi.htm

Eingabefeld

Button

5 Body-Mass-Index

...<script language="javascript">...function detBMI(aWeight, aHeight) { aHeight = aHeight / 100; return Math.round(aWeight/eval(aHeight * aHeight));}... </script>...

Darstellung der Web-Seite

Ausschnitt aus dem Quelltext

6 Browser als JavaScript-Interpreter

Browser

(Client)

WWW-Server

(Server)

Fordert ein Dokument an

Liefert das Dokument aus

www.actifit.ch

ActifitWomenOnly/Pages/bmi.htm

http

Der Browser zeigt die ausgelieferte Webseite an und führt das integrierte JavaScript-Programm (bei Bedarf) aus.

...<script language="javascript">...function detBMI(aWeight, aHeight) { aHeight = aHeight / 100; return Math.round(aWeight/eval(aHeight * aHeight));}... </script>...

http://www.actifit.ch/ActifitWomenOnly/Pages/bmi.htm

7 Zielsetzung

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

Vereinfachte Webseite

8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>BMI</title><script type="text/javascript">...</script> </head><body><h2>Berechnen Sie Ihren BMI-Wert!</h2><form action ="" name="formular"><p>Groesse (in m): <input type="text" name="eGroesse" value="2.00"></p><p>Gewicht (in kg): <input type="text" name="eGewicht" value="100"></p><p><input type="button" name="bRechnen" value="Berechnen" onClick="berechnen()"></p><p>BMI: <input type="text" name="aBMI"></p></form></body></html>

Quelltext zur Webseite

9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>BMI</title><script type="text/javascript">...</script> </head><body><h2>Berechnen Sie Ihren BMI-Wert!</h2><form action ="" name="formular"><p>Groesse (in m): <input type="text" name="eGroesse" value="2.00"></p><p>Gewicht (in kg): <input type="text" name="eGewicht" value="100"></p><p><input type="button" name="bRechnen" value="Berechnen" onClick="berechnen()"></p><p>BMI: <input type="text" name="aBMI"></p></form></body></html>

Struktur der Webseite

document:Dokument

: Überschrift

formular:Formular

: Absatz

: Absatz

eGroesse:EingabefeldeGewicht:EingabefeldbRechnen:Button

aBMI:Eingabefeld

: Absatz

: Zeichen

: Zeichen...

: Absatz

: Zeichen ... : Zeichen

......enthält

10

document:Dokument

Objekthierarchie

: Überschrift

formular:Formular

eGroesse:EingabefeldeGewicht:EingabefeldbRechnen:Button

aBMI:Eingabefeld

: Zeichen

......enthält

: Zeichen ... : Zeichen

<!DOCTYPE HTML ...><html>...</html>

<form action ="" name="formular">...</form>: A

: A

: A

: A

<input type="text" name="eGroesse" value="2.00"><input type="text" name="eGewicht" value="100"><input type="button" name="bRechnen" ...>

<input type="text" name="aBMI">

Objekttyp

Objektname

11 Eigenschaften von Objekten

eGroesse:Eingabefeld

<form action ="" name="formular">...</form>

: A<input type="text" name="eGroesse" value="2.00">

value = "2.00" ...

formular:Formular

action = ...

document:Dokument

title = ...

Attribut Attributwert

12 Ereignisbehandlung

document:Dokument

formular:Formular

: A eGroesse: Eingabefeld

<script type="text/javascript"></script>bRechnen: Button

: A eGewicht: Eingabefeld

: A

value="Berechnen" onClick="berechnen()"

: A aBMI: Eingabefeld

Wenn der Benutzer auf den Button drückt, löst er ein Ereignis aus, das vom sog. „Eventhandler“ bearbeitet wird. Dieser Eventhandler veranlasst, die Javascript-Funktion „berechnen()“ auszuführen.

13 Variablen

document:Dokument

formular:Formular

: A eGroesse: Eingabefeldvalue = "2.00"

<script type="text/javascript"></script>

eGewicht: Eingabefeldvalue = "100"

aBMI: Eingabefeld

value = ""

bRechnen: Buttongroesse:

gewicht:

bmi:

: A

: A

: A

14 Zugriff auf Attributwerte

eGroesse:Eingabefeldvalue = "2.00" ...

formular:Formular

action = ...

document:Dokument

title = ...

document.formular.eGroesse.value : "2.00"

<script type="text/javascript"></script> groesse:

gewicht:

bmi:

: A

15 Kopieren der Eingabewerte

<script type="text/javascript"></script> groesse: "2.00"

gewicht: "100"

bmi:

document:Dokument

formular:Formular



aBMI: Eingabefeld

value = ""

bRechnen: Button

: A

: A

: A

16 Verarbeitung


gewicht: "100"

bmi: 25.0

document:Dokument

formular:Formular



aBMI: Eingabefeld

value = ""

bRechnen: Button

: A

: A

: A

17 Kopieren des Ausgabewerts


gewicht: "100"

bmi: 25.0

document:Dokument

formular:Formular



aBMI: Eingabefeld

value = "25.0"

bRechnen: Button

: A

: A

: A

18 EVA-Prinzip

<script type="text/javascript"></script>Viele Programme lassen sich nach dem EVA-Prinzip entwerfen:

Man versucht, die Verarbeitungsprozesse nach dem Muster „Eingabe, Verarbeitung, Ausgabe“ zu gliedern.

E

V

A

19 Algorithmus

<script type="text/javascript"></script>

Eingabe: groesse, gewicht

bmi = gewicht/(groesse*groesse)

Ausgabe: bmi

Algorithmus

JavaScript-Programm

Struktur und Verhalten eines Programms lassen sich oft besser verstehen, wenn man den zu Grunde liegenden Algorithmus herausstellt.

20 Algorithmus

Eingabe: groesse, gewicht

bmi = gewicht/(groesse*groesse)

Ausgabe: bmi

E

V

A

Algorithmus zur Berechnung des BMI-Werts:

Struktur und Verhalten eines Programms lassen sich oft besser verstehen, wenn man den zu Grunde liegenden Algorithmus herausstellt.

21 Übung

Ziel ist es, ein interaktives Programm zur Flächeninhaltsberechnung zu entwickeln.

Verhaltensbeschreibung:Eingabe: Länge und Breite eines RechtecksAusgabe: Umfang und Flächeninhalt des Rechtecks

Entwerfen Sie zunächst- eine geeignete Benutzungsoberfläche und- einen Algorithmus zum gewünschten Verhalten.

Entwickeln Sie anschließend das Programm in Analogie zum BMI-Programm.

22 Übung

Ziel ist es, ein interaktives Programm zur Umrechnung eines Euro-Betrags in US-Dollar zu entwickeln.

Entwerfen Sie zunächst- eine Verhaltensbeschreibung (Eingaben und Ausgaben),- eine geeignete Benutzungsoberfläche und- einen Algorithmus zum gewünschten Verhalten.

Entwickeln Sie anschließend das Programm in Analogie zum BMI-Programm.

Hinweis: Aktuelle Kursdaten finden Sie unter http://dollar-kurse.de.

23 Teil 2

Variablenkonzept

24 Mäusepopulation

Wir betrachten die Entwicklung einer Mäusepopulation. Die Population wird unterteilt in junge Mäuse, erwachsene Mäuse und alte Mäuse. Wir gehen von den folgenden Annahmen aus:- In einem Simulationsschritt wird die Hälfte der jungen Mäuse erwachsen.- In einem Simulationsschritt erzeugt jede erwachsene Maus (im Durchschnitt) 4 junge Mäuse. Nur ein Drittel der erwachsenen Mäuse wird in einem Simulationsschritt alt.- In einem Simulationsschritt erzeugt jede alte Maus (im Durchschnitt) 2 junge Mäuse. Alle alten Mäuse sterben innerhalb dieses Simulationsschrittes.

25 Mäusepopulation

jung

6

erw.

9

alt

12

jung

60

erw.

3

alt

3

1/2 1/34 2

Schritt

0

Schritt

1

i i+1

26 Entwicklung der Mäusepopulation

Schritt Anzahl der Anzahl der Anzahl derjungen Mäuse erw. Mäuse alten Mäuse

0 6 9 12

1 60 = 4*9 + 2*12 3 = 6:2 3 = 9:32 18 = 4*3 + 2*3 30 = 60:2 1 = 3:33 122 = 4*30 + 2*1 9 = 18:2 10 = 30:34 56 = 4*9 + 2*10 61 = 122:2 3 = 9:35 250 = 4*61 + 2*3 28 = 56:2 20,3.. = 61:3

...

Zielsetzung: Automatisierung der Berechnung der jeweils nächsten Mäusepopulation

27 Berechnungsmodell

0

6.0

9.0

12.0

Schritt :

jung :

erwachsen :

alt :

Die zu verarbeitenden Daten werden in Speicherzellen abgelegt und mit Hilfe von Variablen verwaltet.

Variablenname

Speicherzelle

Variablenwert

{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]} Variablenzustand

28 Berechnungsmodell

alt 12.0

Variablenzustand vorher

Wertzuweisung

{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [...]}

Variablenzustand nachher{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]}

erwachsen jung / 2

{Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]}


Schritt Schritt +1



Eine Veränderung eines Speicherzelleninhalts kann mit Hilfe einer Wertzuweisung (an die entsprechende Variable) erfolgen.


Wertzuweisung

Variablenzustand nachher


Wertzuweisung


29 Struktur einer Wertzuweisung

Schritt = Schritt + 1

Struktur einer Wertzuweisung (vorläufig): Eine Wertzuweisung besteht aus einer Variablen (der ein Wert zugewiesen wird) und einem Term (der den zuzuweisenden Wert festlegt).

alt = 12.0

erwachsen = jung / 2

Variable Term Wertzuweisung - Struktur

Wertzuweisungen in JavaScript

30 Auswertung einer Wertzuweisung

0Schritt : Variablenzustand vorher

Variable Term


1

Schritt Schritt + 1

1Schritt :

Auswertung einer Wertzuweisung: Der Wert des Terms (rechte Seite der Wertzuweisung) wird bzgl. des aktuellen Variablenzustands ermittelt und der Variablen (linke Seite der Wertzuweisung) als neuer Wert zugewiesen. Der Inhalt der zur Variablen gehörenden Speicherzelle wird dabei überschrieben.

31

Berechnung einer neuen Population

vorher Die eingeführten Variablen beschreiben die Anfangspopulation. {Schritt: [0]; jung: [6.0]; erwachsen: [9.0]; alt: [12.0]}

nachher Die Variablen beschreiben die Population nach einem Simulationsschritt. {Schritt: [1]; jung: [60.0]; erwachsen: [3.0]; alt: [3.0]}

Algorithmus

Schritt Schritt + 1

jung erwachsen*4 + alt*2

erwachsen jung / 2

alt erwachsen / 3

Problemspezifikation

Vorschlag für einen Algorithmus

32 Trace-Tabelle

Variablenzustand

Schritt jung erw. alt

0 6.0 9.0 12.0

1 6.0 9.0 12.0

1 60.0 9.0 12.0

1 60.0 30.0 12.0

1 60.0 30.0 10.0

Wertzuweisung

Schritt Schritt + 1

jung erwachsen*4 + alt*2

erwachsen jung / 2

alt erwachsen / 3

Trace-Tabelle

Mit Hilfe einer Trace-Tabelle kann man die einzelnen Berechnungsschritte verfolgen.

Nicht korrekt!

33 Reihenfolge von Wertzuweisungen

Variablenzustand

Schritt jung erw. alt hilf

0 6.0 9.0 12.0

1 6.0 9.0 12.0

1 6.0 9.0 12.0 60.0

1 6.0 9.0 3.0 60.0

1 6.0 3.0 3.0 60.0

1 60.0 3.0 3.0 60.0

Wertzuweisung

Schritt Schritt + 1

hilf erwachsen*4 + alt*2

alt erwachsen / 3

erwachsen jung / 2

jung hilf

Beachte: Bei der Datenverarbeitung mit Hilfe von Wertzuweisungen muss man auf die Reihenfolge der Wertzuweisungen achten.

Trace-Tabelle

korrekt!

34 Algorithmus

Eingabe: Schritt, jung, erwachsen, alt

Schritt Schritt + 1


alt erwachsen / 3

erwachsen jung / 2

jung hilf

Ausgabe: Schritt, jung, erwachsen, alt

E

V

A

Algorithmus zur Berechnung des jeweils nächsten Populationszustands:

35 Aufgabe

Testen Sie den folgenden Implementierungsversuch (siehe „Maeuse1“).var Schritt, jung, erwachsen, alt, hilf;

function berechnen(){ // Eingabe Schritt = document.formular.eSchritt.value; jung = document.formular.eJung.value; erwachsen = document.formular.eErwachsen.value; alt = document.formular.eAlt.value; // Verarbeitung Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; // Ausgabe document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt;}

36

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!

37

...document.write("Deklaration: var a: <br>");document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");a = 1;document.write("Anweisung: a = 1: <br>");document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");a = "1";document.write('Anweisung: a = "1": <br>');document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");a = a+1;document.write("Anweisung: a = a+1: <br>");document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");a = a*1;document.write("Anweisung: a = a*1: <br>");document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");a = "1";document.write('Anweisung: a = "1": <br>');document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>");a = parseInt(a);document.write("Anweisung: a = parseInt(a): <br>");document.write("a hat den Datentyp <i>"+typeof(a)+"</i>.<br><br>")...

Programm: Typentest

38 Datentypen

Ein Datentyp legt einen Wertebereich und die Grundoperationen fest, die mit den Elementen des Wertebereichs durchgeführt werden können.

Datentyp: number (JavaScript)

Der Datentyp number beschreibt ganze Zahlen wie 1 oder -1 und Dezimalzahlen wie 3.14 oder -2.1. Beachte, dass der Wertebereich insgesamt endlich ist. Operationen: 3 + 2 53 – 2 13 * 2 63 / 2 1.53 % 2 1 (Rest bei ganzzahliger Division)

Datentyp: string (JavaScript)

Der Datentyp string beschreibt Zeichenketten wie "hallo" oder "Anweisung: a = 2". Grundoperation: "2" + "5" "25" (Konkatenation)

39

...function berechnen(){ Schritt = document.formular.eSchritt.value; jung = document.formular.eJung.value; erwachsen = document.formular.eErwachsen.value; alt = document.formular.eAlt.value; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt;}...<form action ="" name="formular"><p>Anzahl der Simulationsschritte: <input type="text" name="eSchritt" value="0"></p>

Zahl oder Zeichenkette?

Zeichenkette

"0" + "1" "01"

Schritt "0"

"0" + 1 ?

0 + 1 1

40

...function berechnen(){ Schritt = document.formular.eSchritt.value; jung = document.formular.eJung.value; erwachsen = document.formular.eErwachsen.value; alt = document.formular.eAlt.value; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt;}...<form action ="" name="formular"><p>Anzahl der Simulationsschritte: <input type=text name="eSchritt" value="0"></p>

Automatische Typumwandlung

Eingabe: string

Umwandlung: string number

Umwandlung: number string

Ausgabe: string7

41

...function berechnen(){ Schritt = parseInt(document.formular.eSchritt.value); jung = parseInt(document.formular.eJung.value); erwachsen = parseInt(document.formular.eErwachsen.value); alt = parseInt(document.formular.eAlt.value); Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; document.formular.eSchritt.value = Schritt; document.formular.eJung.value = jung; document.formular.eErwachsen.value = erwachsen; document.formular.eAlt.value = alt;}...<form action ="" name="formular"><p>Anzahl der Simulationsschritte: <input type=text name="eSchritt" value="0"></p>

Explizite Typumwandlung

parseInt: string number

Autom. Umwandlung:

number string

Ausgabe: string

Eingabe: string

42 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.

43 Aufgabe

Ergänzen Sie im Programm „Maeuse1“ die erforderlichen Typumwandlungen.

Testen Sie anschließend das neue Programm.

44 Teil 3

Kontrollstrukturen

45 Bisher: Sequentielle Algorithmen

Eingabe: Schritt, jung, erwachsen, alt

Schritt Schritt + 1


alt erwachsen / 3

erwachsen jung / 2

jung hilf

Ausgabe: Schritt, jung, erwachsen, alt

Eingabe: gewicht, groesse

bmi gewicht/(groesse*groesse);

Ausgabe: bmi

BMI-Berechnung Mäusepopulation

46 Variationen zur BMI-Berechnung

Das Programm zur Berechnung des BMI-Werts soll dem Benutzer weitere Informationen in Abhängigkeit des berechneten Werts liefern.

47 Zweiseitige Fallunterscheidung

BMI

bmi gewicht/(groesse*groesse)

bmi < 19ja nein

bewertung

"Untergewicht"

bmi > 26ja nein

bewertung

"Übergewicht"

bewertung

"Normalgewicht"

48 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;}

49 Einseitige Fallunterscheidung

BMI

bmi gewicht/(groesse*groesse)

bewertung "Normalgewicht"

bmi < 19ja nein

bewertung

"Untergewicht"

bmi > 26ja nein

bewertung

"Übergewicht"

50 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;}

51 Mehrfachauswahl

BMI

bmi Runden(gewicht/(groesse*groesse))

bmi

18 19 20 ... sonst

bewertung

"etwas zu

wenig"

bewertung

"am unteren

Limit"

bewertung

"wenig, aber

ok"

...

bewertung

"außerhalb des

Bereichs"

52 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;}

53 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:

54

Mäusepopulation

zaehler 0

SOLANGE (zaehler < 10)

...

zaehler zaehler+1

Zählschleife

Initialisierung

Test

Aktualisierung

Mäusepopulation

zaehler 0


schritt schritt + 1


alt erwachsen/3

erwachsen jung/2

jung hilf

gesamt jung+erwachsen+alt

zaehler zaehler+1

Berechne die Population nach einer vorgegebenen Anzahl von Schritten.

55 Implementierung

...zaehler = 0;while (zaehler < 10){ Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; zaehler = zaehler + 1;};...

Implementierung mit einer while-Anweisung

Mäusepopulation

zaehler 0


schritt schritt + 1


alt erwachsen/3

erwachsen jung/2

jung hilf


zaehler zaehler+1

Programmausschnitt

56 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;};...

57 Wiederholung mit ...

Berechne, nach wie vielen Schritten die Population eine vorgegebene Grenze überschreitet.

Mäusepopulation

zaehler 0

SOLANGE (gesamt < grenze)


alt erwachsen/3

erwachsen jung/2

jung hilf


zaehler zaehler+1

Mäusepopulation

zaehler 0

SOLANGE (gesamt < grenze)


alt erwachsen/3

erwachsen jung/2

jung hilf


zaehler zaehler+1

Anfangsbedingung

Endbedingung

58 ... Anfangs- bzw. Endbedingung

Bed.

Anw.

w

f

Bed.

Anw.

fw

Beachte: Die Anweisung wird hier mindestens einmal ausgeführt.

WH mit Anfangsbedingung

SOLANGE Bedingung

Anweisungsfolge

WH mit Endbedingung

SOLANGE Bedingung

Anweisungsfolge

Erst die Bedingung überprüfen, dann die Anweisungen ausführen!

Erst die Anweisungen ausführen, dann die Bedingung überprüfen!

59 Endbedingungen

Bed.

Anw.

fw

JavaScript: do {...} while (...);

WH mit Endbedingung

SOLANGE Bedingung

Anweisungsfolge

Bed.

Anw.

wf

Pascal, Delphi: repeat ... until ...;

WH mit Endbedingung

BIS Bedingung

Anweisungsfolge

Austritt aus der Schleife, wenn die Endbedingung nicht mehr erfüllt ist.

Austritt aus der Schleife, wenn die Endbedingung erfüllt ist.

60 Vorsicht: Endlosschleife

Berechne, nach wie vielen Schritten die Population einen bestimmten Wert erreicht.

Mäusepopulation

zaehler 0

SOLANGE (alt != 100)


alt erwachsen/3

erwachsen jung/2

jung hilf


zaehler zaehler+1

Achtung:Bei bestimmten Eingaben nicht

erfüllbar!

61 Kontrollstrukturen

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

62 Hinweise zur Implementierung

Sequenz:

Anweisungen{ ...};

Eine Sequenz von Anweisungen wird durch einen Anweisungsblock implementiert. Blockanfang und Blockende werden mit Hilfe von geschweiften Klammern markiert.


Fallunterscheidung (zweiseitig)

Fallunterscheidung (einseitig)

Vergleichsoperatoren (für Zahlen):

== (gleich)!= (ungleich)< (kleiner)> (größer)<= (kleiner oder gleich)>= (größer oder gleich)

if (...){ ...};

Anweisungen

Bedingung

if (...){ ...}else{ ...};

Anweisungen

Anweisungen

Bedingung


Wiederholung mit Anfangsbedingung

while (...){ ...};

Anweisungen

Bedingung

Wiederholung mit Endbedingung

do{ ...}while (...);

Anweisungen

Bedingung

Zählschleife

for (...; ...; ...){ ...};

Anweisungen

Initialisierung

Bedingung

Aktualisierung

65 Ü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).

66 Übungen

Der folgende Algorithmus beschreibt das Heron-Verfahren zur näherungsweisen Berechnung von Quadratwurzeln.

Implementieren und testen Sie diesen Algorithmus.

Heron-Verfahren

Eingabe: a, epsilon (beide > 0)

a > 1?ja nein

x - a

y - 1

x - 1

y - a

solange (x-y > epsilon)

x - (x+y)/2

y -a/x

Ausgabe: x, x²

Siehe auch:

http://hsg.region-kaiserslautern.de/faecher/inf/javascript/0304/index.php

67 Ü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

Date post:	27-Jan-2016
Category:	Documents
Upload:	roden
View:	23 times
Download:	0 times

Programmierung mit JavaScript

Documents