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
Themenüberblick „Programmiersprachen II“



Drei-Schichten Architektur / MVC
Programmiersprachen – Konzepte
 Variablen
 Auswahlanweisungen
 Kontrollstrukturen



Objektorientierte Programmierung
 Objekt
 Kapselung / Information Hiding / Geheimnisprinzip
 Vererbung
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
Darstellung

Logik

Daten
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
MVC – Model View Controller (Modell, Präsentation, Steuerung)
1972 im Kontext von „Smalltalk“ (objektorientierte Programmiersprache) vorgestellt
Model / Datenhaltungsschicht
Model!
Spielfeld: 3 x 3 Felder
Auf jedem Feld wird die ID des Spielers
abgelegt, der / die das Feld angeklickt hat
var gameBoard = [][];
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;
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] );
Mehrdimensionale Arrays
Zugriff auf Werte in zweidimensionalen Arrays:
var cellContent = gameBoard[xCoord][yCoord]
???
1.
2.
3.

var cellContent = gameBoard[ 0 ] [ 1 ];
var cellContent = gameBoard[ 2 ] [ 2 ];
var cellContent = gameBoard[ 3 ] [ 1 ];
Spielfluss und
Anwendungslogik
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
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
Kontrollstrukturen
Kontrollstrukturen
Unterscheidung von Kontrollstrukturen in:
 Auswahlanweisungen
?
 Wiederholungsanweisungen
?
 Sprunganweisungen
?
Kontrollstrukturen
Unterscheidung von Kontrollstrukturen in:
 Auswahlanweisungen
 if
 if else
 (switch)
 Wiederholungsanweisungen
 while
 for
 do while
 Sprunganweisungen
 return
 break
 continue
WENN es heute NICHT regnet, DANN gehe ich joggen…
if (es regnet ist falsch) {
ich gehe joggen;
}

WENN es heute NICHT regnet, DANN gehe ich joggen…
Auswahlanweisungen: if
if (ausdruck) {
anweisung1
anweisung2
anweisung3
...
}
ausdruck  variable1 OPERATOR variable2
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) )
if (es regnet == falsch) {
ich gehe joggen;
}

WENN es heute NICHT regnet, DANN gehe ich joggen…
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.“);
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.“);
}
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
Ü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?
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
Wiederholungsanweisungen
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
Wiederholungsanweisungen: while
while (ausdruck){

anweisung1
anweisung2
anweisung3
}

 „Führe anweisung1 und anweisung2 und
anweisung3 so lange aus, wie die Bedingung
„ausdruck“ WAHR (TRUE) ist.“
Wiederholungsanweisungen: do while
do {
anweisung1
anweisung2
anweisung3
anweisung4
...
} while (ausdruck)
Wiederholungsanweisungen: for
for(initialisierung;
abbruchbedingung;
inkrementierung) {
anweisung1
anweisung2
anweisung3
anweisung4
...
}
Ü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
Themenüberblick „Programmiersprachen II“



Drei-Schichten Architektur / MVC
Programmiersprachen – Konzepte







Variablen
Arrays
Auswahlanweisungen
Kontrollstrukturen

Objektorientierte Programmierung
 Objekt
 Kapselung / Information Hiding / Geheimnisprinzip
 Vererbung
Last, but not….:

Objektorientierte
Softwareentwicklung
Kapselung, Information Hiding, Geheimnisprinzip

Abb.: Balzert, Heide: Lehrbuch der Objektmodellierung. Heidelberg, 2005.
Objektorientierte Programmierung
var game = {
name : '',
setName : function( gameName ) {
this.name = gameName;
},
state : '',
getGameState : function() {
return this.state;
},
setGameState : function( gameState ) {
this.state = gameState;
},
[…]
};
/

Bit WiSe 2013 | Basisinformationstechnologie I - 10: Programmiersprachen II

  • 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-SchichtenArchitektur / 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.
  • 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 – ModelView Controller (Modell, Präsentation, Steuerung) 1972 im Kontext von „Smalltalk“ (objektorientierte Programmiersprache) vorgestellt
  • 9.
  • 10.
    Model! Spielfeld: 3 x3 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  Sammlungvon 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 aufWerte 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.
  • 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 EinSpieler / 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.
  • 19.
    Kontrollstrukturen Unterscheidung von Kontrollstrukturenin:  Auswahlanweisungen ?  Wiederholungsanweisungen ?  Sprunganweisungen ?
  • 20.
    Kontrollstrukturen Unterscheidung von Kontrollstrukturenin:  Auswahlanweisungen  if  if else  (switch)  Wiederholungsanweisungen  while  for  do while  Sprunganweisungen  return  break  continue
  • 21.
    WENN es heuteNICHT regnet, DANN gehe ich joggen…
  • 22.
    if (es regnetist 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: Zuprü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 undelse 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 EinSpieler / 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üfenI: 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.
  • 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.
  • 36.
    Übung 2 SOLANGE keinSpieler / 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-SchichtenArchitektur / MVC Programmiersprachen – Konzepte      Variablen Arrays Auswahlanweisungen Kontrollstrukturen Objektorientierte Programmierung  Objekt  Kapselung / Information Hiding / Geheimnisprinzip  Vererbung
  • 38.
  • 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.