1 Programmierung mit JavaScript Klaus Becker 2005

Programmierung mit JavaScript

Klaus Becker

2 Programmierung mit JavaScript

document:Dokument

formular:Formular

: A eGroesse: Eingabefeld

: A eGewicht: Eingabefeld

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

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

<!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

<!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

eGroesse:EingabefeldeGewicht:EingabefeldbRechnen:Button

aBMI:Eingabefeld

: Absatz

: Zeichen

: Zeichen...

: Absatz

: Zeichen ... : Zeichen

......enthält

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

Objekttyp

Objektname

11 Eigenschaften von Objekten

eGroesse:Eingabefeld

: 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

: A eGewicht: Eingabefeld

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"

eGewicht: Eingabefeldvalue = "100"

aBMI: Eingabefeld

value = ""

bRechnen: Buttongroesse:

gewicht:

14 Zugriff auf Attributwerte

eGroesse:Eingabefeldvalue = "2.00" ...

formular:Formular

action = ...

document:Dokument

title = ...

document.formular.eGroesse.value : "2.00"

gewicht:

15 Kopieren der Eingabewerte

gewicht: "100"

document:Dokument

formular:Formular

aBMI: Eingabefeld

value = ""

bRechnen: Button

16 Verarbeitung

gewicht: "100"

bmi: 25.0

document:Dokument

formular:Formular

aBMI: Eingabefeld

value = ""

bRechnen: Button

17 Kopieren des Ausgabewerts

gewicht: "100"

bmi: 25.0

document:Dokument

formular:Formular

aBMI: Eingabefeld

value = "25.0"

bRechnen: Button

18 EVA-Prinzip

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

19 Algorithmus

Eingabe: groesse, gewicht

bmi = gewicht/(groesse*groesse)

Ausgabe: bmi

Algorithmus

JavaScript-Programm

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

20 Algorithmus

Eingabe: groesse, gewicht

bmi = gewicht/(groesse*groesse)

Ausgabe: bmi

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

1/2 1/34 2

Schritt

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

Schritt :

jung :

erwachsen :

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

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.

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

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 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?

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!

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

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)

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

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

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

43 JavaScript und Typen

JavaScript ist nicht typisiert.

Der Typ einer Variablen wird bei einer Variablendeklaration nicht festgelegt.

JavaScript wandelt Typen automatisch um.

JavaScript versucht, aus dem Kontext (z. B. durchzuführende Operationen) zu erschließen, von welchem Typ die zu verarbeitenden Werte sind. Hierdurch kann es zu automatischen Typumwandlungen kommen.Vorteil:

Beim Programmieren mit JavaScript muss man sich oft nicht um Typen kümmern. Das macht die Sache einfacher.

Nachteil:

Fehler sind manchmal schwer zu finden. Die Klarheit leidet durch die nicht im Text angezeigten Umwandlungsoperationen.

44 Aufgabe

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

Testen Sie anschließend das neue Programm.

45 Teil 3

Kontrollstrukturen

46 Bisher: Sequentielle Algorithmen

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

47 Variationen zur BMI-Berechnung

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

48 Zweiseitige Fallunterscheidung

bmi gewicht/(groesse*groesse)

bmi < 19ja nein

bewertung

"Untergewicht"

bmi > 26ja nein

bewertung

"Übergewicht"

bewertung

"Normalgewicht"

49 Zweiseitige Fallunterscheidung

50 Einseitige Fallunterscheidung

bmi gewicht/(groesse*groesse)

bewertung "Normalgewicht"

bmi < 19ja nein

bewertung

"Untergewicht"

bmi > 26ja nein

bewertung

"Übergewicht"

51 Einseitige Fallunterscheidung

52 Mehrfachauswahl

bmi Runden(gewicht/(groesse*groesse))

18 19 20 ... sonst

bewertung

"etwas zu

wenig"

bewertung

"am unteren

Limit"

bewertung

"wenig, aber

bewertung

"außerhalb des

Bereichs"

53 Mehrfachauswahl

function berechnen(){ groesse = parseFloat(document.formular.eGroesse.value); gewicht = parseFloat(document.formular.eGewicht.value); bmi = Math.round(gewicht/(groesse*groesse)); switch (bmi) { case 18: bewertung = "etwas zu wenig"; break; case 19: bewertung = "am unteren Limit"; break; case 20: bewertung = "wenig, aber ok"; break; ... default: bewertung = "außerhalb des Bereichs"; break; }; document.formular.aBMI.value = bmi; document.formular.aBewertung.value = bewertung;}

54 Variationen zur Mäusepopulation

Entwicklung der Mäusepopulation:- In einem Simulationsschritt wird die Hälfte der jungen Mäuse erwachsen.- In einem Simulationsschritt erzeugt jede erwachsene Maus (im Durchschnitt) 4 junge Mäuse. Nur ein Drittel der erwachsenen Mäuse wird in einem Simulationsschritt alt.- In einem Simulationsschritt erzeugt jede alte Maus (im Durchschnitt) 2 junge Mäuse. Alle alten Mäuse sterben innerhalb dieses Simulationsschritts.

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:

Mäusepopulation

zaehler 0

SOLANGE (zaehler < 10)

zaehler zaehler+1

Zählschleife

Initialisierung

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.

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

schritt schritt + 1

alt erwachsen/3

erwachsen jung/2

jung hilf

zaehler zaehler+1

Programmausschnitt

57 Implementierung

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

Implementierung mit einer for-Anweisung

Programmausschnitt

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

58 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

59 ... Anfangs- bzw. Endbedingung

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!

60 Endbedingungen

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

WH mit Endbedingung

SOLANGE Bedingung

Anweisungsfolge

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.

61 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!

62 Kontrollstrukturen

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

63 Hinweise zur Implementierung

Sequenz:

Anweisungen{ ...};

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

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

Bedingung

Wiederholung mit Anfangsbedingung

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

Anweisungen

Bedingung

Wiederholung mit Endbedingung

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

Anweisungen

Bedingung

Zählschleife

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

Anweisungen

Initialisierung

Bedingung

Aktualisierung

66 Übungen

Annahmen über die Mäusepopulation:Sind weniger als 1000 Mäuse in der Population, so verhalten sich die Mäuse wie bisher: - In einem Simulationsschritt wird die Hälfte der jungen Mäuse erwachsen.- In einem Simulationsschritt erzeugt jede erwachsene Maus (im Durchschnitt) 4 junge Mäuse. Nur ein Drittel der erwachsenen Mäuse wird in einem Simulationsschritt alt.- In einem Simulationsschritt erzeugt jede alte Maus (im Durchschnitt) 2 junge Mäuse. Alle alten Mäuse sterben innerhalb dieses Simulationsschrittes.Ab 1000 Mäuse wird das Futter knapp. Alte Mäuse erzeugen dann keine jungen Mäuse mehr und jede erwachsene Maus erzeugt (im Durchschnitt) nur noch 1.5 junge Mäuse.Berücksichtigen Sie die oben dargestellten Veränderungen der

Population. Das Simulationsprogramm soll des weiteren um folgende Eingabe erweitert werden: Der Benutzer kann die Anzahl der Schritte, die jeweils berechnet werden, selbst festlegen (z. B. 5 Schritte).

67 Übungen

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

Implementieren und testen Sie diesen Algorithmus.

Heron-Verfahren

Eingabe: a, epsilon (beide > 0)

a > 1?ja nein

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

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

69 Teil 4

Ereignisgesteuerte Abläufe

70 17 und 4

Ziel ist es, das Spiel „17 und 4“ zu simulieren. Das Spiel soll wie folgt funktionieren: In jedem Spielzug wird eine Karte mit einer Zahl aus dem Bereich [1;...;11] bestimmt und auf einen Kartenstapel gelegt. Der Spieler kann nach jedem Spielzug entscheiden, ob er aufhört oder weiter spielt. Ist die Summe der Zahlen der Karten des Stapels größer als 21, so hat der Spieler verloren. Hört der Spieler bei einer Stapelsumme kleiner oder gleich 21 auf, so wird die nächste Karte gezogen. Ist die neue Stapelsumme immer noch kleiner oder gleich 21, so hat der Spieler verloren, andernfalls gewonnen.

71 Spielablauf

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

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

73 Aufgabe

Implementieren Sie das Spiel „17 und 4“. Benutzen Sie hierbei das Programmgerüst in „s17u4v0.html“. Zur Erzeugung von Zufallszahlen können die folgenden Anweisungen benutzt werden:

zahl = Math.random()*11 + 1;karte = Math.floor(zahl);

Math.random() erzeugt eine Pseudo-Zufallszahl zwischen 0.0 und 1.0.

Math.random()*11+1 erzeugt eine Pseudo-Zufallszahl zwischen 1.0 und 12.0.

Math.floor(zahl) schneidet die Nachkommastellen ab.

Testen Sie das Programm. Welche Schwierigkeiten zeigen sich?

74 Lösung

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

75 Lösung

function ziehen(){ zahl = Math.random()*11 + 1; karte = Math.floor(zahl); stapel = stapel + karte; if (stapel > 21) { ergebnis = "verloren"; }; document.formular.aKarte.value = karte; document.formular.aStapel.value = stapel; document.formular.aErgebnis.value = ergebnis;}

76 Lösung

77 Schwierigkeit

Karte: 10

Stapel: 10

Karte ziehen

Karte: 10

Stapel: 20

Spiel beenden

Karte: 4

Stapel: 24

Karte ziehen

Karte: 6

Stapel: 30

Karte ziehen

Karte:

Stapel: 0

Ergebnis: gewonnen

Ergebnis: verloren

Ergebnis:

Nachdem das Spiel beendet worden ist, können weitere Karten gezogen werden. Es kommt dann zu irritierenden Ausgaben.

78 Lösungsansatz

Karte: 10

Stapel: 10

Karte ziehen

Karte: 10

Stapel: 20

Spiel beenden

Karte: 4

Stapel: 24

Karte ziehen

Karte: 4

Stapel: 24

Karte ziehen

Karte:

Stapel: 0

Ergebnis: gewonnen

entschieden: true

Ergebnis: gewonnen

entschieden: true

Ergebnis:

entschieden: false

Ergebnis:

entschieden: false

Ergebnis:

entschieden: false

Karte: 10

Stapel: 10

Karte ziehen

Karte: 10

Stapel: 20

Spiel beenden

Karte: 4

Stapel: 24

Karte ziehen

Karte: 6

Stapel: 30

Karte ziehen

Karte:

Stapel: 0

Ergebnis: gewonnen

Ergebnis: verloren

Ergebnis:

79 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

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.

81 Lösung mit boolescher Variablen

var karte, stapel = 0, ergebnis = "", zahl, entschieden = false;

boolesche Variablen

82 Aufgabe

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

83 Teil 5

Unterprogramme

84 Zielsetzung

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

85 Identische Programmteile

Wir betrachten noch einmal die entwickelten Programme zur Mäusepopulation. Ziel ist es, diese neu zu strukturieren.

function berechnen1(){ Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt; document.formular.eSchritt.value = Schritt; ...} function berechnen10()

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

Identische Programmteile

86 Unterprogramm

function berechnen1(){ neuePolulation(); document.formular.eSchritt.value = Schritt; ...}

function berechnen10(){ zaehler = 0; while (zaehler < 10) { neuePopulation(); zaehler = zaehler + 1; }; ...}

function neuePopulation(){ Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt;}

Ein Unterprogramm kann als elementare Anweisung in einem anderen Programmteil benutzt werden.

87 Lokale Variablen

function berechnen10(){ var zaehler; zaehler = 0; while (zaehler < 10) { neuePopulation(); zaehler = zaehler + 1; }; ...}

function neuePopulation(){ var hilf; Schritt = Schritt + 1; hilf = erwachsen*4 + alt*2; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt;}

var schritt, jung, erwachsen, alt, gesamt; Globale Variablen

Lokale Variable

88 Lokale Variablen

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

Verschiedene Ein-Schritt-Berechnungen

90 Datenübergabe mit Parametern

function berechnen1(){ if (gesamt < 1000) { neuePopulation(4, 2); } else { neuePopulation(1.5, 0); }; document.formular.eSchritt.value = Schritt; ...}

function neuePopulation(fErw, fAlt){ Schritt = Schritt + 1; hilf = erwachsen*fErw + alt*fAlt; alt = erwachsen/3; erwachsen = jung/2; jung = hilf; gesamt = jung + erwachsen + alt;}

Mit Hilfe von Parametern kann man Daten zur Laufzeit an das betreffende Unterprogramm übergeben. Bei der Deklaration werden für die zu übergebenden Daten Platzhalter (formale Parameter) eingeführt.

Formale Parameter(Platzhalter)

Aktuelle Parameter(übergebene Daten)

91 Zielsetzung

Das Programm zur Simulation des Spiels „17 und 4“ soll ebenfalls neu strukturiert werden.

„Neue Karte ziehen“

92 Funktion

function neueKarte(){ return Math.floor(Math.random()*11+1);}

Funktion(Verarbeitung mit

Rückgabewert)

Prozedur(Verarbeitung ohne

Rückgabewert)

93 Funktionsaufruf

function neueKarte(){ return Math.floor(Math.random()*11+1);}

Funktionsdeklaration

Funktionsaufruf

94 Variante: Funktion mit Parametern

function zufallszahl(max){ return Math.floor(Math.random()*max+1);}

Formaler Parameter

Aktueller Parameter

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

96 Aufgabe

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

97 Teil 6

Die Datenstruktur Reihung

98 Ziel

Beim Spiel „17 und 4“ erfolgte die Simulation des Kartenziehens mit Hilfe eines Zufallsgenerators. Zu überprüfen wäre vorab, ob dieser Zufallsgenerator die benötigten Zufallszahlen auch fair erzeugt, d. h. ob auf lange Sicht alle gewünschten Zahlen in etwa gleich häufig auftreten. Ziel ist es, zur Überprüfung dieser Form von Fairness ein Testprogramm zu entwickeln. Mit Hilfe dieses Programms sollen nach und nach Zufallszahlen aus einem bestimmten Bereich (z. B. 0..9) erzeugt werden und es soll eine Statistik angefertigt werden, wie oft welche Zahl dabei vorkommt.

99 Datenmodellierung

anzahl2:

2anzahl1:

anzahl4:

anzahl3:

anzahl6:

anzahl5:

anzahl7:

anzahl9:

anzahl8:

2anzahl0:

100 Initialisierung der Statistik

function initialisieren(){ anzahl0 = 0; anzahl1 = 0; anzahl2 = 0; anzahl3 = 0; anzahl4 = 0; anzahl5 = 0; anzahl6 = 0; anzahl7 = 0; anzahl8 = 0; anzahl9 = 0; document.formular.a0.value = anzahl0; document.formular.a1.value = anzahl1; document.formular.a2.value = anzahl2; document.formular.a3.value = anzahl3; document.formular.a4.value = anzahl4; document.formular.a5.value = anzahl5; document.formular.a6.value = anzahl6; document.formular.a7.value = anzahl7; document.formular.a8.value = anzahl8; document.formular.a9.value = anzahl9;}

101 Erzeugung einer Zufallszahl

102 Reihung

anzahl2:

anzahl1:

anzahl4:

anzahl3:

anzahl6:

anzahl5:27

anzahl: 21

451 2 3 4 5 6

Reihung

Index31

anzahl7:

anzahl9:

anzahl8:

anzahl0:

457 8 9

Idee: Gleichartige Daten werden zu einer Einheit zusammengefasst.

Element

var anzahl = new Object();

Erzeugung eines Array-Objekts in JavaScript

103 Zugriff auf die Elemente

anzahl: 21

451 2 3 4 5 6

Reihung

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;

104 Initialisierung der Statistik

function initialisieren(){ for (var i = 0; i < 10; i = i+1) { anzahl[i] = 0; }; document.formular.a0.value = anzahl0; document.formular.a1.value = anzahl1; document.formular.a2.value = anzahl2; document.formular.a3.value = anzahl3; document.formular.a4.value = anzahl4; document.formular.a5.value = anzahl5; document.formular.a6.value = anzahl6; document.formular.a7.value = anzahl7; document.formular.a8.value = anzahl8; document.formular.a9.value = anzahl9;}

105 Formularelemente als Array

document.formular.elements[0]

document.formular.a0

106 Verarbeitung

function initialisieren(){ for (var i = 0; i < 10; i = i+1) { anzahl[i] = 0; }; for (var i = 0; i < 10; i = i+1) { document.formular.elements[i].value = anzahl[i]; };}

function erzeugen(){ var zahl = zufallszahl(0,9); anzahl[zahl] = anzahl[zahl] + 1; document.formular.elements[zahl].value = anzahl[zahl];}

107 Aufgabe

Entwickeln Sie ein Programm, das zunächst 10 Zufallszahlen aus einem vorher festgelegten Bereich (z. B. {0, ..., 99}) erzeugt und anschließend diese Zahlenfolge wie folgt auswertet:- Wie groß ist das arithmetische Mittel der Zahlen?- Welches ist die kleinste Zahl?- Welches ist die größte Zahl?- Welche Zahlen kommen mehrfach vor?- Wie lautet die längste aufsteigend sortierte Teilfolge?

108 Literaturhinweise

Schulbücher:

T. H. Krebs und B. Krebs: Web-Seiten mit HTML und JavaScript. Cornelsen 2002.

Internet:

K. Merkert: Materialien zur Programmierung mit JavaScript im Wahlfach Informatik. 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

1 Programmierung mit JavaScript Klaus Becker 2005

Documents

CSS,Javascript Maya. Javascript-banner Man bindet die Javascript Datei zepto.js in html ein mit den Tag „script“ und mit der Quellen Angabe „src“

JavaScript Architektur

JavaScript Grundlagen

JavaScript - Einführung 1. Ein Wort zuvordigilib.happy-security.de/files/JavaScript-leichte-einfuehrung.pdf · JavaScript - Einführung 1. Ein Wort zuvor Leider muss ich gestehen,

3 Ein kurzer Überblick über Webanwendungen · 3.3 JavaScript Die dynamischen und interaktiven Merkmale einer Webanwendung er-fordern JavaScript. JavaScript ist die einzige Sprache,

Grundkonzepte der objektorientierten Programmierung Klaus Becker 2003

Grundkonzepte der objektorientierten Programmierung Teil 2 Klaus Becker 2006

Object oriented JavaScript

Javascript Einfache Ausgabeanweisung Autor: H.Sporenberg JavaScript - Einführung

PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

Anforderungsanalsyse - Prototyping mit JavaScript

Konzepte imperativer Programmierung Klaus Becker 2008

Funktionale Programmierung IFB 1/2002 Klaus Becker

FUNKTIONALE PROGRAMMIERUNG IN JAVASCRIPT Zentrale … filePrinzip 4: Funktionale Programme sind deklarativ. Funktionen sind Objekte erster Klasse (so genannte First Class Objects,

Fraktale malen mit Lindemeyer- Grammatik · Sequentielle Programmierung mit JavaKara ? Kontrollstrukturen von JAVA ? Vertiefung in JavaScript und HTML-DOM Klasse 9 Wahlpflichtunterricht:

MVC und JavaScript

Einführung in die objektbasierte Programmierung mit Delphi Klaus Becker iMedia 2007

JavaScript Grundkurs - DynamicOSdynamicos.se/kurser/javascript/javascript-grundkurs.pdfTitle JavaScript Grundkurs Author Mahmud Al Hakim Created Date 11/25/2013 10:21:48 PM

Grundkonzepte der objektorientierten Programmierung Teil 3 Klaus Becker 2006

Innehåll JavaScript - Grundkurs · 2013. 11. 25. · 1 JavaScript - Grundkurs Mahmud Al Hakim mahmud@dynamicos.se Innehåll Introduktion till JavaScript JavaScript i HTML-dokument