1. Basisinformationstechnologie I
Wintersemester 2013/14
15. Januar 2013 – Programmiersprachen II
Universität zu Köln. Historisch-Kulturwissenschaftliche Informationsverarbeitung
Jan G. Wieners // jan.wieners@uni-koeln.de

2. Themenüberblick „Programmiersprachen II“


Drei-Schichten Architektur / MVC
Programmiersprachen – Konzepte
 Variablen
 Auswahlanweisungen
 Kontrollstrukturen

Objektorientierte Programmierung
 Objekt
 Kapselung / Information Hiding / Geheimnisprinzip
 Vererbung

4. Programmiersprachen – Charakteristika, Konzepte und Methoden



Interpretiert vs. compiliert
Typisierung: statisch, dynamisch, etc.
Paradigmen:




Funktional
Imperativ
Prozedural
Objektorientiert

Grundlegende Konzepte: Variablen, Arrays,
Kontrollstrukturen, Funktionen, Objekte

Das Rad nicht neu erfinden: Design Patterns /
Entwurfsmuster, Strukturierungsmuster: MVC (u.a.)

Modellierung

6. Darstellung
Logik
Daten

7. Schichten-Architektur
Drei-Schichten-Architektur
 GUI-Schicht
 Fachkonzeptschicht
 Datenhaltungsschicht
GUI-Schicht: Realisiert die
Benutzungsoberfläche einer
Anwendung – Präsentation der Daten,
Interaktion mit Benutzer / Benutzerin
Fachkonzeptschicht: Modelliert den
funktionalen Kern der Anwendung;
Zugriff auf Datenhaltungsschicht
Datenhaltungsschicht: Form der
Datenspeicherung, z.B. relationale DB

8. MVC – Model View Controller (Modell, Präsentation, Steuerung)
1972 im Kontext von „Smalltalk“ (objektorientierte Programmiersprache) vorgestellt

9. Model / Datenhaltungsschicht

10. Model!
Spielfeld: 3 x 3 Felder
Auf jedem Feld wird die ID des Spielers
abgelegt, der / die das Feld angeklickt hat
var gameBoard = [][];

11. Arrays und Variablen
Variable: Benannte Speicherstelle
Charakteristika:




Variablenname
Wert
(Datentyp)
(Adresse der Speicherzelle)
JavaScript:
// Deklaration
var meineVariable;
// Initialisierung
meineVariable = 23;
C++:
// Deklaration
int meineVariable;
// Initialisierung
meineVariable = 23;

12. Arrays
Array  Sammlung von Datenwerten
Jeder Wert in einem Array wird über den Index adressiert; gezählt
wird ab 0: meinArray[index]
// Deklaration
var lottoZahlen = [];
// Initialisierung
lottoZahlen[0] = 23;
lottoZahlen[1] = 15;
lottoZahlen[2] = 3;
lottoZahlen[3] = 42; lottoZahlen[4] = 7; lottoZahlen[5] = 8;
// Ausgabe
document.write( lottoZahlen[0] + “, “ + lottoZahlen[1] );

13. Mehrdimensionale Arrays
Zugriff auf Werte in zweidimensionalen Arrays:
var cellContent = gameBoard[xCoord][yCoord]

14. ???
1.
2.
3.
var cellContent = gameBoard[ 0 ] [ 1 ];
var cellContent = gameBoard[ 2 ] [ 2 ];
var cellContent = gameBoard[ 3 ] [ 1 ];

15. Spielfluss und
Anwendungslogik

16. Präsentation und Interaktion – die Spielschleife
SOLANGE kein Spieler / keine Spielerin das Spiel
gewonnen hat, VERFAHRE WIE FOLGEND:
WENN ein leeres Spielfeld angeklickt wurde:
lege die aktuelle SpielerID im
zweidimensionalen Array „gameGrid“ ab
und stelle das Spielersymbol dar
IM ANDEREN FALLE:
tue nichts
Prüfe die Gewinnbedingung

17. Gewinn- und Abbruchbedingung
Ein Spieler / eine Spielerin hat das Spiel gewonnen,
WENN:
der Spieler drei seiner Symbole in
(unmittelbarer) horizontaler Reihenfolge
abgelegt hat
ODER
der Spieler drei Symbole in diagonaler
Reihenfolge abgelegt hat

18. Kontrollstrukturen

19. Kontrollstrukturen
Unterscheidung von Kontrollstrukturen in:
 Auswahlanweisungen
?
 Wiederholungsanweisungen
?
 Sprunganweisungen
?

20. Kontrollstrukturen
Unterscheidung von Kontrollstrukturen in:
 Auswahlanweisungen
 if
 if else
 (switch)
 Wiederholungsanweisungen
 while
 for
 do while
 Sprunganweisungen
 return
 break
 continue

21. WENN es heute NICHT regnet, DANN gehe ich joggen…

22. if (es regnet ist falsch) {
ich gehe joggen;
}
WENN es heute NICHT regnet, DANN gehe ich joggen…

23. Auswahlanweisungen: if
if (ausdruck) {
anweisung1
anweisung2
anweisung3
...
}
ausdruck  variable1 OPERATOR variable2

24. C++, JavaScript & Co.: (Vergleichs)Operatoren
Operator
<=
Operation
Größer als
(„ist Wert1 größer als Wert2?“)
Kleiner als
(„ist Wert 1 kleiner als Wert2?“)
Größer gleich
(„ist Wert1 kleiner oder gleich Wert2?“)
Kleiner gleich
(„ist Wert1 kleiner oder gleich Wert2?“)
==
Auf Gleichheit prüfen
variable1 == variable2
!=
variable1 != variable2
&&
Auf Ungleichheit prüfen
Logisches UND: Zwei Bedingungen
prüfen
||
Logisches ODER
if( (a==b) || (b==c) )
>
<
>=
Beispiel
Wert1 > Wert2
Wert1 < Wert2
Wert1 >= Wert2
Wert1 <= Wert2
if( (a==b) && (b==c) )

25. if (es regnet == falsch) {
ich gehe joggen;
}
WENN es heute NICHT regnet, DANN gehe ich joggen…

26. Auswahlanweisungen: if
Beispiel: Zu prüfen ist, ob der Wert von variableZwei
größer ist als der Wert von variableEins. Wenn ja, soll
eine entsprechende Nachricht ausgegeben werden:
var variableEins = 5;
var variableZwei = 8;
if(variableZwei > variableEins)
alert(“Der in Variable Zwei
gespeicherte Wert
größer als der in
Eins gespeicherte
}
{
ist
Variable
Wert.“);

27. Auswahlanweisungen: if und else
Beispiel: Zu prüfen ist, ob der Wert von variableZwei größer ist als der
Wert von variableEins. Wenn ja, soll eine entsprechende Nachricht
ausgegeben werden:
var variableEins = 5;
var variableZwei = 8;
if(variableZwei > variableEins) {
alert(“Der in Variable Zwei
gespeicherte Wert ist
größer als der in Variable Eins
gespeicherte Wert.“);
}
else {
alert(“Der in Variable Zwei
gespeicherte Wert ist
kleiner als der in Variable Eins
gespeicherte Wert.“);
}

28. Gewinn- und Abbruchbedingung
Ein Spieler / eine Spielerin hat das Spiel gewonnen,
WENN (IF):
der Spieler drei seiner Symbole in
(unmittelbarer) horizontaler Reihenfolge
abgelegt hat
ODER (II)
der Spieler drei Symbole in diagonaler
Reihenfolge abgelegt hat

29. Übung 1
Interaktion
 Prüfen I: Wurde ein leeres Spielfeld angeklickt?
Gewinnbedingung
 Prüfen I: Hat ein Spieler / eine Spielerin drei ihrer
Symbole in (unmittelbarer) horizontaler
Reihenfolge abgelegt?
 Prüfen II: Finden sich drei Symbole eines Spielers
in diagonaler Folge?

30. Präsentation und Interaktion – die Spielschleife
SOLANGE kein Spieler / keine Spielerin das Spiel
gewonnen hat, VERFAHRE WIE FOLGEND:
WENN ein leeres Spielfeld angeklickt wurde:
lege die aktuelle SpielerID im
zweidimensionalen Array „gameGrid“ ab
und stelle das Spielersymbol dar
IM ANDEREN FALLE:
tue nichts
Prüfe die Gewinnbedingung

31. Wiederholungsanweisungen

32. Wiederholungsanweisungen
Wiederholungsanweisungen (i.e. while, for, do
while) machen‘s möglich, bestimmte
Verarbeitungsschritte unter bestimmten Umständen
zu wiederholen
Beispiele:
 while
 for
 do while

33. Wiederholungsanweisungen: while
while (ausdruck){
anweisung1
anweisung2
anweisung3
}
 „Führe anweisung1 und anweisung2 und
anweisung3 so lange aus, wie die Bedingung
„ausdruck“ WAHR (TRUE) ist.“

34. Wiederholungsanweisungen: do while
do {
anweisung1
anweisung2
anweisung3
anweisung4
...
} while (ausdruck)

35. Wiederholungsanweisungen: for
for(initialisierung;
abbruchbedingung;
inkrementierung) {
anweisung1
anweisung2
anweisung3
anweisung4
...
}

36. Übung 2
SOLANGE kein Spieler / keine Spielerin das Spiel
gewonnen hat, VERFAHRE WIE FOLGEND:
WENN ein leeres Spielfeld angeklickt wurde:
lege die aktuelle SpielerID im
zweidimensionalen Array „gameGrid“ ab
und stelle das Spielersymbol dar
IM ANDEREN FALLE:
tue nichts
Prüfe die Gewinnbedingung

37. Themenüberblick „Programmiersprachen II“


Drei-Schichten Architektur / MVC
Programmiersprachen – Konzepte





Variablen
Arrays
Auswahlanweisungen
Kontrollstrukturen
Objektorientierte Programmierung
 Objekt
 Kapselung / Information Hiding / Geheimnisprinzip
 Vererbung

38. Last, but not….:
Objektorientierte
Softwareentwicklung

39. Kapselung, Information Hiding, Geheimnisprinzip
Abb.: Balzert, Heide: Lehrbuch der Objektmodellierung. Heidelberg, 2005.

40. Objektorientierte Programmierung
var game = {
name : '',
setName : function( gameName ) {
this.name = gameName;
},
state : '',
getGameState : function() {
return this.state;
},
setGameState : function( gameState ) {
this.state = gameState;
},
[…]
};

41. /