1 programmierung mit javascript klaus becker 2005
TRANSCRIPT
![Page 1: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/1.jpg)
1
Programmierung mit JavaScript
Klaus Becker
2005
![Page 2: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/2.jpg)
2 Programmierung mit JavaScript
document:Dokument
formular:Formular
: A eGroesse: Eingabefeld
<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>bRechnen: Button
: A eGewicht: Eingabefeld
: A
value="Berechnen" onClick="berechnen()"
: A aBMI: Eingabefeld
![Page 3: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/3.jpg)
3 Teil 1
Interaktive Web-Seiten
![Page 4: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/4.jpg)
4 Body-Mass-Index
http://www.actifit.ch/ActifitWomenOnly/Pages/bmi.htm
Eingabefeld
Button
![Page 5: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/5.jpg)
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
![Page 6: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/6.jpg)
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
![Page 7: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/7.jpg)
7 Zielsetzung
Ziel ist es, anhand einer vereinfachten Version den Aufbau einer interaktiven Web-Seite zu verstehen.
Vereinfachte Webseite
![Page 8: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/8.jpg)
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
![Page 9: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/9.jpg)
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
![Page 10: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/10.jpg)
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
![Page 11: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/11.jpg)
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
![Page 12: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/12.jpg)
12 Ereignisbehandlung
document:Dokument
formular:Formular
: A eGroesse: Eingabefeld
<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>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.
![Page 13: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/13.jpg)
13 Variablen
document:Dokument
formular:Formular
: A eGroesse: Eingabefeldvalue = "2.00"
<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>
eGewicht: Eingabefeldvalue = "100"
aBMI: Eingabefeld
value = ""
bRechnen: Buttongroesse:
gewicht:
bmi:
: A
: A
: A
![Page 14: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/14.jpg)
14 Zugriff auf Attributwerte
eGroesse:Eingabefeldvalue = "2.00" ...
formular:Formular
action = ...
document:Dokument
title = ...
document.formular.eGroesse.value : "2.00"
<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> groesse:
gewicht:
bmi:
: A
![Page 15: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/15.jpg)
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> groesse: "2.00"
gewicht: "100"
bmi:
document:Dokument
formular:Formular
: A eGroesse: Eingabefeldvalue = "2.00"
eGewicht: Eingabefeldvalue = "100"
aBMI: Eingabefeld
value = ""
bRechnen: Button
: A
: A
: A
![Page 16: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/16.jpg)
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> groesse: "2.00"
gewicht: "100"
bmi: 25.0
document:Dokument
formular:Formular
: A eGroesse: Eingabefeldvalue = "2.00"
eGewicht: Eingabefeldvalue = "100"
aBMI: Eingabefeld
value = ""
bRechnen: Button
: A
: A
: A
![Page 17: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/17.jpg)
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> groesse: "2.00"
gewicht: "100"
bmi: 25.0
document:Dokument
formular:Formular
: A eGroesse: Eingabefeldvalue = "2.00"
eGewicht: Eingabefeldvalue = "100"
aBMI: Eingabefeld
value = "25.0"
bRechnen: Button
: A
: A
: A
![Page 18: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/18.jpg)
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>Viele Programme lassen sich nach dem EVA-Prinzip entwerfen:
Man versucht, die Verarbeitungsprozesse nach dem Muster „Eingabe, Verarbeitung, Ausgabe“ zu gliedern.
E
V
A
![Page 19: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/19.jpg)
19 Algorithmus
<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
JavaScript-Programm
Struktur und Verhalten eines Programms lassen sich oft besser verstehen, wenn man den zu Grunde liegenden Algorithmus herausstellt.
![Page 20: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/20.jpg)
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.
![Page 21: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/21.jpg)
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.
![Page 22: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/22.jpg)
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.
![Page 23: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/23.jpg)
23 Teil 2
Variablenkonzept
![Page 24: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/24.jpg)
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.
![Page 25: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/25.jpg)
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
![Page 26: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/26.jpg)
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
![Page 27: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/27.jpg)
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
![Page 28: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/28.jpg)
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
![Page 29: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/29.jpg)
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
![Page 30: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/30.jpg)
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.
![Page 31: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/31.jpg)
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
![Page 32: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/32.jpg)
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!
![Page 33: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/33.jpg)
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!
![Page 34: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/34.jpg)
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:
![Page 35: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/35.jpg)
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;}
![Page 36: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/36.jpg)
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?
![Page 37: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/37.jpg)
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!
![Page 38: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/38.jpg)
38
...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
![Page 39: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/39.jpg)
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 -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)
![Page 40: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/40.jpg)
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>
Zahl oder Zeichenkette?
Zeichenkette
"0" + "1" "01"
Schritt "0"
"0" + 1 ?
0 + 1 1
![Page 41: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/41.jpg)
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;}...<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
![Page 42: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/42.jpg)
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;}...<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
![Page 43: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/43.jpg)
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.
![Page 44: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/44.jpg)
44 Aufgabe
Ergänzen Sie im Programm „Maeuse1“ die erforderlichen Typumwandlungen.
Testen Sie anschließend das neue Programm.
![Page 45: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/45.jpg)
45 Teil 3
Kontrollstrukturen
![Page 46: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/46.jpg)
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-Berechnung Mäusepopulation
![Page 47: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/47.jpg)
47 Variationen zur BMI-Berechnung
Das Programm zur Berechnung des BMI-Werts soll dem Benutzer weitere Informationen in Abhängigkeit des berechneten Werts liefern.
![Page 48: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/48.jpg)
48 Zweiseitige Fallunterscheidung
BMI
bmi gewicht/(groesse*groesse)
bmi < 19ja nein
bewertung
"Untergewicht"
bmi > 26ja nein
bewertung
"Übergewicht"
bewertung
"Normalgewicht"
![Page 49: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/49.jpg)
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;}
![Page 50: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/50.jpg)
50 Einseitige Fallunterscheidung
BMI
bmi gewicht/(groesse*groesse)
bewertung "Normalgewicht"
bmi < 19ja nein
bewertung
"Untergewicht"
bmi > 26ja nein
bewertung
"Übergewicht"
![Page 51: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/51.jpg)
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;}
![Page 52: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/52.jpg)
52 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"
![Page 53: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/53.jpg)
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;}
![Page 54: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/54.jpg)
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:
![Page 55: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/55.jpg)
55
Mäusepopulation
zaehler 0
SOLANGE (zaehler < 10)
...
zaehler zaehler+1
Zählschleife
Initialisierung
Test
Aktualisierung
Mäusepopulation
zaehler 0
SOLANGE (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
Berechne die Population nach einer vorgegebenen Anzahl von Schritten.
![Page 56: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/56.jpg)
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
Mäusepopulation
zaehler 0
SOLANGE (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
![Page 57: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/57.jpg)
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;};...
![Page 58: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/58.jpg)
58 Wiederholung mit ...
Berechne, nach wie vielen Schritten die Population eine vorgegebene Grenze überschreitet.
Mäusepopulation
zaehler 0
SOLANGE (gesamt < grenze)
hilf erwachsen*4 + alt*2
alt erwachsen/3
erwachsen jung/2
jung hilf
gesamt jung+erwachsen+alt
zaehler zaehler+1
Mäusepopulation
zaehler 0
SOLANGE (gesamt < grenze)
hilf erwachsen*4 + alt*2
alt erwachsen/3
erwachsen jung/2
jung hilf
gesamt jung+erwachsen+alt
zaehler zaehler+1
Anfangsbedingung
Endbedingung
![Page 59: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/59.jpg)
59 ... 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!
![Page 60: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/60.jpg)
60 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.
![Page 61: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/61.jpg)
61 Vorsicht: Endlosschleife
Berechne, nach wie vielen Schritten die Population einen bestimmten Wert erreicht.
Mäusepopulation
zaehler 0
SOLANGE (alt != 100)
hilf erwachsen*4 + alt*2
alt erwachsen/3
erwachsen jung/2
jung hilf
gesamt jung+erwachsen+alt
zaehler zaehler+1
Achtung:Bei bestimmten Eingaben nicht
erfüllbar!
![Page 62: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/62.jpg)
62 Kontrollstrukturen
Kontrollstrukturen dienen dazu, den genauen Ablauf der Verarbeitung festzulegen. Wichtige Kontrollstrukturen sind die - Sequenz(bildung),- Fallunterscheidung,- Wiederholung.
![Page 63: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/63.jpg)
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.
![Page 64: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/64.jpg)
64 Hinweise zur Implementierung
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
![Page 65: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/65.jpg)
65 Hinweise zur Implementierung
Wiederholung mit Anfangsbedingung
while (...){ ...};
Anweisungen
Bedingung
Wiederholung mit Endbedingung
do{ ...}while (...);
Anweisungen
Bedingung
Zählschleife
for (...; ...; ...){ ...};
Anweisungen
Initialisierung
Bedingung
Aktualisierung
![Page 66: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/66.jpg)
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).
![Page 67: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/67.jpg)
67 Ü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
![Page 68: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/68.jpg)
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:
http://hsg.region-kaiserslautern.de/faecher/inf/javascript/0304/index.php
![Page 69: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/69.jpg)
69 Teil 4
Ereignisgesteuerte Abläufe
![Page 70: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/70.jpg)
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.
![Page 71: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/71.jpg)
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 ziehen
Karte:
Stapel: 0
Karte:
Stapel: 0
![Page 72: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/72.jpg)
72 Ereignisbearbeitung
Auslösende Aktion Ausgelö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: gewonnensonst Ergebnis: verloren
Mausklick auf Button „Spiel beginnen“
Stapel wird initialisiert
![Page 73: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/73.jpg)
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?
![Page 74: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/74.jpg)
74 Lösung
function beginnen(){ stapel = 0; ergebnis = ""; document.formular.aKarte.value = ""; document.formular.aStapel.value = stapel; document.formular.aErgebnis.value = ergebnis;}
![Page 75: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/75.jpg)
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;}
![Page 76: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/76.jpg)
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;}
![Page 77: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/77.jpg)
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:
Ergebnis:
Ergebnis:
Nachdem das Spiel beendet worden ist, können weitere Karten gezogen werden. Es kommt dann zu irritierenden Ausgaben.
![Page 78: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/78.jpg)
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:
Ergebnis:
Ergebnis:
![Page 79: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/79.jpg)
79 Ereignisbearbeitung
Auslösende Aktion Ausgelö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
![Page 80: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/80.jpg)
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
a b a AND b
false false falsefalse true falsetrue false falsetrue true true
a NOT a
false truetrue false
a b a OR b
false false falsefalse true truetrue false truetrue true true
Ein Datentyp legt einen Wertebereich und die Grundoperationen fest, die mit den Elementen des Wertebereichs durchgeführt werden können.
![Page 81: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/81.jpg)
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
![Page 82: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/82.jpg)
82 Aufgabe
Ändere Sie das Programm so ab, dass es das oben spezifizierte Verhalten aufweist.
![Page 83: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/83.jpg)
83 Teil 5
Unterprogramme
![Page 84: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/84.jpg)
84 Zielsetzung
Wir betrachten noch einmal ein Programme zur Mäusepopulation. Ziel ist es, dieses Programm neu zu strukturieren.
![Page 85: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/85.jpg)
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
Identische Programmteile
![Page 86: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/86.jpg)
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.
![Page 87: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/87.jpg)
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
![Page 88: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/88.jpg)
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
![Page 89: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/89.jpg)
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; ...}
![Page 90: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/90.jpg)
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)
![Page 91: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/91.jpg)
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“
![Page 92: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/92.jpg)
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)
![Page 93: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/93.jpg)
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
![Page 94: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/94.jpg)
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
![Page 95: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/95.jpg)
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 Parameterfunction neueKarte(){ return zufallszahl(11);}
![Page 96: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/96.jpg)
96 Aufgabe
Strukturieren Sie eines Ihrer selbst geschriebenen Programme mit Hilfe von Unterprogrammen.
![Page 97: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/97.jpg)
97 Teil 6
Die Datenstruktur Reihung
![Page 98: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/98.jpg)
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.
![Page 99: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/99.jpg)
99 Datenmodellierung
21
anzahl2:
2anzahl1:
33
anzahl4:
25
anzahl3:
45
anzahl6:
43
anzahl5:
33
anzahl7:
45
anzahl9:
43
anzahl8:
2anzahl0:
![Page 100: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/100.jpg)
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;}
![Page 101: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/101.jpg)
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; ...}
![Page 102: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/102.jpg)
102 Reihung
21
anzahl2:
27
anzahl1:
33
anzahl4:
25
anzahl3:
45
anzahl6:
43
anzahl5:27
anzahl: 21
25
33
43
451 2 3 4 5 6
Reihung
Index31
anzahl7:
45
anzahl9:
40
anzahl8:
30
anzahl0:
300
31
40
457 8 9
Idee: Gleichartige Daten werden zu einer Einheit zusammengefasst.
Element
var anzahl = new Object();
Erzeugung eines Array-Objekts in JavaScript
![Page 103: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/103.jpg)
103 Zugriff auf die Elemente
27
anzahl: 21
25
33
43
451 2 3 4 5 6
Reihung
Index
300
31
40
457 8 9
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;
![Page 104: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/104.jpg)
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;}
![Page 105: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/105.jpg)
105 Formularelemente als Array
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>
document.formular.a0
![Page 106: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/106.jpg)
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];}
![Page 107: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/107.jpg)
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?
![Page 108: 1 Programmierung mit JavaScript Klaus Becker 2005](https://reader036.vdocuments.mx/reader036/viewer/2022062318/55204d7149795902118c3be3/html5/thumbnails/108.jpg)
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. http://hsg.region-kaiserslautern.de/faecher/inf/javascript/0304/index.php
W. Rockenbach: ITG und JavaScript. http://informatikag.bildung-rp.de/html/body_ideenskizzen.html