Get documents about "Programmieren mit JavaScript
Document Sample
Programmierung mit JavaScript
1
2 Programmierung mit JavaScript
document: <script type="text/javascript">
Dokument <!--
var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
formular: document.formular.eGewicht.value;
Formular
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
:A eGroesse: Eingabefeld
}
//-->
:A eGewicht: Eingabefeld
</script>
:A bRechnen: Button
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
Darstellung der Web-Seite
...
<script language="javascript">
...
function detBMI(aWeight, aHeight)
{
aHeight = aHeight / 100;
return Math.round(aWeight/eval(aHeight *
aHeight));
}
Ausschnitt aus dem Quelltext
...
</script>
6 Browser als JavaScript-Interpreter
Der Browser zeigt die ausgelieferte Webseite an und führt das integrierte
JavaScript-Programm (bei Bedarf) aus.
http://www.actifit.ch/
ActifitWomenOnly/Pages/bmi.htm www.actifit.ch
Fordert ein Dokument an
Browser WWW-Server
http
(Client) (Server)
Liefert das Dokument aus
...
<script language="javascript">
...
function detBMI(aWeight, aHeight) ActifitWomenOnly/
{
aHeight = aHeight / 100;
Pages/bmi.htm
return Math.round(aWeight/eval(aHeight *
aHeight));
}
...
</script>
...
7 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-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>
9 Struktur der Webseite
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
document:
Dokument
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> : Überschrift
<meta http-equiv="content-type"Zeichen
<title>BMI</title>
: ... : Zeichen
content="text/html; charset=iso-8859-1">
: Zeichen
formular:
<script type="text/javascript">
... Formular
</script>
: Absatz
eGroesse:
Eingabefeld
... : Zeichen
</head>
<body>
eGewicht:
: Absatz
<h2>Berechnen Sie Ihren BMI-Wert!</h2> Eingabefeld
<form action ="" name="formular">
bRechnen:
<p>Groesse (in m): <input type="text" name="eGroesse" value="2.00"></p>
: Absatz Button
<p>Gewicht (in kg): <input type="text" name="eGewicht" value="100"></p>
<p><input type="button" name="bRechnen" value="Berechnen"
aBMI:
onClick="berechnen()"></p> : Absatz Eingabefeld
<p>BMI: <input type="text" name="aBMI"></p>
</form> enthält
</body> ... ...
</html>
10 Objekthierarchie
document: <!DOCTYPE HTML ...><html>...</html>
Dokument
: Überschrift
: Zeichen : Zeichen ... : Zeichen
formular: <form action =""
Formular
name="formular">...</form>
eGroesse: <input type="text"
Objektname :A Eingabefeld name="eGroesse"
value="2.00">
Objekttyp eGewicht: <input type="text"
:A Eingabefeld name="eGewicht"
value="100">
bRechnen: <input type="button"
:A Button name="bRechnen" ...>
aBMI: <input type="text"
:A Eingabefeld name="aBMI">
enthält
... ...
11 Eigenschaften von Objekten
document:
Dokument
title =
...
formular:
Formular
action = <form action =""
... name="formular">...</form>
eGroesse:
:A Eingabefeld
<input type="text"
value = "2.00" name="eGroesse"
... value="2.00">
Attribut Attributwert
12 Ereignisbehandlung
document: <script type="text/javascript">
Dokument <!--
var groesse, gewicht, bmi;
function berechnen()
{
groesse =
document.formular.eGroesse.value;
gewicht =
formular: document.formular.eGewicht.value;
Formular
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
:A eGroesse: Eingabefeld
}
//-->
:A eGewicht: Eingabefeld
Wenn der
</script> Benutzer auf den Button
:A bRechnen: Button drückt, löst er ein Ereignis aus, das vom
value="Berechnen" sog. „Eventhandler“ bearbeitet wird.
onClick="berechnen()" Dieser Eventhandler veranlasst, die
Javascript-Funktion „berechnen()“
:A aBMI: Eingabefeld
auszuführen.
13 Variablen
document: <script type="text/javascript">
Dokument <!--
var groesse, gewicht, bmi;
function berechnen()
{
formular: groesse =
Formular
document.formular.eGroesse.value;
gewicht =
:A eGroesse: Eingabefeld
document.formular.eGewicht.value;
value = "2.00" bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
eGewicht: Eingabefeld }
:A
//-->
value = "100" </script>
groesse:
:A bRechnen: Button
gewicht:
:A aBMI: Eingabefeld
value = "" bmi:
14 Zugriff auf Attributwerte
document: <script type="text/javascript">
Dokument <!--
title = var groesse, gewicht, bmi;
... function berechnen()
{
groesse =
formular:
Formular
document.formular.eGroesse.value;
gewicht =
action =
document.formular.eGewicht.value;
...
bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
}
//-->
</script>
eGroesse:
:A Eingabefeld groesse:
value = "2.00"
gewicht:
...
bmi:
document.formular.eGroesse.value : "2.00"
15 Kopieren der Eingabewerte
document: <script type="text/javascript">
Dokument <!--
var groesse, gewicht, bmi;
function berechnen()
{
formular: groesse =
Formular
document.formular.eGroesse.value;
gewicht =
:A eGroesse: Eingabefeld
document.formular.eGewicht.value;
value = "2.00" bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
eGewicht: Eingabefeld }
:A
//-->
value = "100" </script>
groesse: "2.00"
:A bRechnen: Button
gewicht: "100"
:A aBMI: Eingabefeld
value = "" bmi:
16 Verarbeitung
document: <script type="text/javascript">
Dokument <!--
var groesse, gewicht, bmi;
function berechnen()
{
formular: groesse =
Formular
document.formular.eGroesse.value;
gewicht =
:A eGroesse: Eingabefeld
document.formular.eGewicht.value;
value = "2.00" bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
eGewicht: Eingabefeld }
:A
//-->
value = "100" </script>
groesse: "2.00"
:A bRechnen: Button
gewicht: "100"
:A aBMI: Eingabefeld
value = "" bmi: 25.0
17 Kopieren des Ausgabewerts
document: <script type="text/javascript">
Dokument <!--
var groesse, gewicht, bmi;
function berechnen()
{
formular: groesse =
Formular
document.formular.eGroesse.value;
gewicht =
:A eGroesse: Eingabefeld
document.formular.eGewicht.value;
value = "2.00" bmi = gewicht/(groesse*groesse);
document.formular.aBMI.value = bmi;
eGewicht: Eingabefeld }
:A
//-->
value = "100" </script>
groesse: "2.00"
:A bRechnen: Button
gewicht: "100"
:A aBMI: Eingabefeld
value = "25.0" bmi: 25.0
18 EVA-Prinzip
<script type="text/javascript">
<!--
var groesse, gewicht, bmi;
function berechnen()
{
E // Eingabe
groesse =
document.formular.eGroesse.value;
V gewicht =
document.formular.eGewicht.value;
A // Verarbeitung
bmi = gewicht/(groesse*groesse);
// Ausgabe
document.formular.aBMI.value = bmi;
}
//-->
</script>
Viele Programme lassen sich nach dem EVA-Prinzip entwerfen:
Man versucht, die Verarbeitungsprozesse nach dem Muster „Eingabe,
Verarbeitung, Ausgabe“ zu gliedern.
19 Algorithmus
JavaScript-Programm <script type="text/javascript">
<!--
var groesse, gewicht, bmi;
function berechnen()
{
// Eingabe
Eingabe: groesse, gewicht
groesse =
document.formular.eGroesse.value;
bmi = gewicht/(groesse*groesse) gewicht =
document.formular.eGewicht.value;
// Verarbeitung
Ausgabe: bmi bmi = gewicht/(groesse*groesse);
// Ausgabe
document.formular.aBMI.value = bmi;
Algorithmus }
//-->
</script>
Struktur und Verhalten eines Programms lassen sich oft besser verstehen,
wenn man den zu Grunde liegenden Algorithmus herausstellt.
20 Algorithmus
Algorithmus zur Berechnung des BMI-Werts:
E Eingabe: groesse, gewicht
V bmi = gewicht/(groesse*groesse)
A Ausgabe: bmi
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 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 erw. alt Schritt
6 9 12 0
1/2 4 1/3 2
i i+1
jung erw. alt Schritt
60 3 3 1
26 Entwicklung der Mäusepopulation
Schritt Anzahl der Anzahl der Anzahl der
jungen Mäuse erw. Mäuse alten Mäuse
0 6 9 12
1 60 = 4*9 + 2*12 3 = 6:2 3 = 9:3
2 18 = 4*3 + 2*3 30 = 60:2 1 = 3:3
3 122 = 4*30 + 2*1 9 = 18:2 10 = 30:3
4 56 = 4*9 + 2*10 61 = 122:2 3 = 9:3
5 250 = 4*61 + 2*3 28 = 56:2 20,3.. = 61:3
...
Zielsetzung:
Automatisierung der Berechnung der jeweils nächsten Mäusepopulation
27 Berechnungsmodell
Die zu verarbeitenden Daten werden in Speicherzellen abgelegt und mit
Hilfe von Variablen verwaltet.
Speicherzelle
Schritt : 0
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 : 0 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 Vorschlag für einen Algorithmus
jung erwachsen*4 + alt*2
erwachsen jung / 2
alt erwachsen / 3
32 Trace-Tabelle
Mit Hilfe einer Trace-Tabelle kann man die einzelnen Berechnungsschritte
verfolgen.
Trace-Tabelle
Wertzuweisung Variablenzustand
Schritt jung erw. alt
0 6.0 9.0 12.0
Schritt Schritt + 1 1 6.0 9.0 12.0
jung erwachsen*4 + alt*2 1 60.0 9.0 12.0
erwachsen jung / 2 1 60.0 30.0 12.0
alt erwachsen / 3 1 60.0 30.0 10.0
Nicht korrekt!
33 Reihenfolge von Wertzuweisungen
Trace-Tabelle
Wertzuweisung Variablenzustand
Schritt jung erw. alt hilf
0 6.0 9.0 12.0
Schritt Schritt + 1 1 6.0 9.0 12.0
hilf erwachsen*4 + alt*2 1 6.0 9.0 12.0 60.0
alt erwachsen / 3 1 6.0 9.0 3.0 60.0
erwachsen jung / 2 1 6.0 3.0 3.0 60.0
jung hilf 1 60.0 3.0 3.0 60.0
korrekt!
Beachte:
Bei der Datenverarbeitung mit Hilfe von Wertzuweisungen muss man auf
die Reihenfolge der Wertzuweisungen achten.
34 Algorithmus
Algorithmus zur Berechnung des jeweils nächsten Populationszustands:
E Eingabe: Schritt, jung, erwachsen, alt
V Schritt Schritt + 1
hilf erwachsen*4 + alt*2
alt erwachsen / 3
erwachsen jung / 2
jung hilf
A Ausgabe: Schritt, jung, erwachsen, alt
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 Programmtest: Maeuse1
function berechnen()
Hier stimmt etwas nicht!
{
// 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;
}
37 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>");
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>")
...
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) Datentyp: string (JavaScript)
Der Datentyp number beschreibt Der Datentyp string beschreibt
ganze Zahlen wie 1 oder -1 und Zeichenketten wie "hallo" oder
Dezimalzahlen wie 3.14 oder -2.1. "Anweisung: a = 2".
Beachte, dass der Wertebereich Grundoperation:
insgesamt endlich ist. "2" + "5" "25" (Konkatenation)
Operationen:
3+25
3–21
3*26
3 / 2 1.5
3%21
(Rest bei ganzzahliger Division)
39 Zahl oder Zeichenkette?
...
function berechnen() Schritt "0"
{
Schritt = document.formular.eSchritt.value;
jung = document.formular.eJung.value;
erwachsen = document.formular.eErwachsen.value;
alt = document.formular.eAlt.value;
Schritt = Schritt + 1; "0" + 1 ?
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3; 0 + 1 1
erwachsen = jung/2;
jung = hilf; "0" + "1" "01"
document.formular.eSchritt.value = Schritt;
document.formular.eJung.value = jung;
document.formular.eErwachsen.value = erwachsen;
document.formular.eAlt.value = alt;
}
...
<form action ="" name="formular"> Zeichenkette
<p>Anzahl der Simulationsschritte:
<input type="text" name="eSchritt" value="0">
</p>
40 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; Eingabe: string
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3; Umwandlung:
erwachsen = jung/2; string number
jung = hilf;
document.formular.eSchritt.value = Schritt; Umwandlung:
document.formular.eJung.value = jung; number string
document.formular.eErwachsen.value = erwachsen;
document.formular.eAlt.value = alt;
}
... Ausgabe: string
<form action ="" name="formular"> 7
<p>Anzahl der Simulationsschritte:
<input type=text name="eSchritt" value="0">
</p>
41 Explizite Typumwandlung
...
function berechnen() parseInt: string number
{
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; Eingabe: string
hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
Autom. Umwandlung:
erwachsen = jung/2;
number string
jung = hilf;
document.formular.eSchritt.value = Schritt;
document.formular.eJung.value = jung;
document.formular.eErwachsen.value = erwachsen;
document.formular.eAlt.value = alt; Ausgabe: string
}
...
<form action ="" name="formular">
<p>Anzahl der Simulationsschritte:
<input type=text name="eSchritt" value="0">
</p>
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
BMI-Berechnung Mäusepopulation
Eingabe: gewicht, groesse Eingabe: Schritt, jung, erwachsen, alt
bmi gewicht/(groesse*groesse); Schritt Schritt + 1
hilf erwachsen*4 + alt*2
Ausgabe: bmi
alt erwachsen / 3
erwachsen jung / 2
jung hilf
Ausgabe: Schritt, jung, erwachsen, alt
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 gew icht/(groesse*groesse)
bmi < 19
ja nein
bmi > 26
ja nein
bew ertung
"Untergew icht" bew ertung bew ertung
"Übergew icht" "Normalgew icht"
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 gew icht/(groesse*groesse)
bew ertung "Normalgew icht"
bmi < 19
ja nein
bew ertung
"Untergew icht"
bmi > 26
ja nein
bew ertung
"Übergew icht"
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(gew icht/(groesse*groesse))
bmi
18 19 20 ... sonst
bew ertung bew ertung bew ertung bew ertung
"etw as zu "am unteren "w enig, aber ... "außerhalb des
w enig" Limit" ok" 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.
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.
54 Zählschleife
Berechne die Population nach einer vorgegebenen Anzahl von Schritten.
Mäusepopulation
zaehler 0
Mäusepopulation
SOLANGE (zaehler < 10) Initialisierung
schritt schritt + 1 Test
zaehler 0
hilf erw achsen*4 + alt*2 SOLANGE (zaehler < 10)
alt erw achsen/3
...
erw achsen jung/2
zaehler zaehler+1
jung hilf
Aktualisierung
gesamt jung+erw achsen+alt
zaehler zaehler+1
55 Implementierung
Implementierung mit einer while-Anweisung
Mäusepopulation
Programmausschnitt
zaehler 0 ...
zaehler = 0;
SOLANGE (zaehler < 10)
while (zaehler < 10)
schritt schritt + 1 {
Schritt = Schritt + 1;
hilf erw achsen*4 + alt*2 hilf = erwachsen*4 + alt*2;
alt = erwachsen/3;
alt erw achsen/3
erwachsen = jung/2;
erw achsen jung/2 jung = hilf;
gesamt = jung + erwachsen + alt;
jung hilf zaehler = zaehler + 1;
};
gesamt jung+erw achsen+alt ...
zaehler zaehler+1
56 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;
Programmausschnitt 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 Mäusepopulation
Anfangsbedingung
zaehler 0 zaehler 0
SOLANGE (gesamt < grenze) hilf erw achsen*4 + alt*2
hilf erw achsen*4 + alt*2 alt erw achsen/3
alt erw achsen/3 erw achsen jung/2
erw achsen jung/2 jung hilf
jung hilf gesamt jung+erw achsen+alt
gesamt jung+erw achsen+alt zaehler zaehler+1
zaehler zaehler+1 SOLANGE (gesamt < grenze)
Endbedingung
58 ... Anfangs- bzw. Endbedingung
Erst die Bedingung überprüfen, dann die Anweisungen ausführen!
f
WH mit Anfangsbedingung Bed.
w
SOLANGE Bedingung
Anw.
Anw eisungsfolge
Erst die Anweisungen ausführen, dann die Bedingung überprüfen!
WH mit Endbedingung
Anw.
Anw eisungsfolge
SOLANGE Bedingung Bed.
w f
Beachte: Die Anweisung wird hier mindestens einmal ausgeführt.
59 Endbedingungen
Austritt aus der Schleife, wenn die Endbedingung nicht mehr erfüllt ist.
WH mit Endbedingung
Anw.
Anw eisungsfolge
SOLANGE Bedingung
Bed.
w f
JavaScript: do {...} while (...);
Austritt aus der Schleife, wenn die Endbedingung erfüllt ist.
WH mit Endbedingung
Anw.
Anw eisungsfolge
BIS Bedingung
Bed.
f w
Pascal, Delphi: repeat ... until ...;
60 Vorsicht: Endlosschleife
Berechne, nach wie vielen Schritten die Population einen bestimmten Wert
erreicht.
Mäusepopulation
zaehler 0
Achtung:
SOLANGE (alt != 100) Bei bestimmten Eingaben
nicht erfüllbar!
hilf erw achsen*4 + alt*2
alt erw achsen/3
erw achsen jung/2
jung hilf
gesamt jung+erw achsen+alt
zaehler zaehler+1
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.
63 Hinweise zur Implementierung
Fallunterscheidung (einseitig) Fallunterscheidung (zweiseitig)
Bedingung Bedingung
if (...) if (...)
{ {
... ... Anweisungen
}; }
else
Anweisungen {
... Anweisungen
};
Vergleichsoperatoren (für Zahlen):
== (gleich)
!= (ungleich)
< (kleiner)
> (größer)
<= (kleiner oder gleich)
>= (größer oder gleich)
64 Hinweise zur Implementierung
Wiederholung mit Anfangsbedingung Wiederholung mit Endbedingung
Bedingung Anweisungen
while (...) do
{ {
... ...
}; }
while (...);
Anweisungen
Bedingung
Zählschleife
Initialisierung Bedingung Aktualisierung
for (...; ...; ...)
{
...
Anweisungen
};
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 Heron-Verfahren
Berechnung von Quadratwurzeln. Eingabe: a, epsilon (beide > 0)
Implementieren und testen Sie diesen a > 1?
Algorithmus. ja nein
x - a x - 1
y - 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
