Quelltext der Seite Hands on Objects mit EOS

== Das Programm ==


{|
|width=800px|
EOS 2 ist eine Programmierumgebung mit einer Programmiersprache, die zum Programmieren von einfachen geometrischen Formen in der Schule gedacht ist. Das Programm ist Freeware und kann über den Link [https://lathanda.de/index.php/downloads/ EOS2] heruntergeladen werden.
|width=20px|
|width=300px | 
|}

== Klassenkarten ==

=== FENSTER ===

{| class="wikitable "
|- style="background: #DDFFDD;"
! FENSTER
|-
|breite<br />
höhe<br />
...
|-
| breiteSetzen(neueBreite)<br />
höheSetzen(neueHöhe)<br />
zeichne(neuesObjekt)<br />
...
|-
|}

=== RECHTECK ===

{| class="wikitable "
|- style="background: #DDFFDD;"
! RECHTECK
|-
|breite<br />
höhe<br />
füllfarbe<br />
randfarbe<br />
...
|-
| füllfarbeSetzen(neueFüllfarbe)<br />
eckenSetzen(loX, loY, ruX, ruY)<br />
randfarbeSetzen(neueRandfarbe)<br />
...
|-
|}
<u>Legende:</u> <br />
lo = links oben <br />
ru = rechts unten <br />

=== KREIS ===

{| class="wikitable "
|- style="background: #DDFFDD;"
! KREIS
|-
|radius<br />
füllfarbe<br />
randfarbe<br />
...
|-
| füllfarbeSetzen(neueFüllfarbe)<br />
mittelpunktSetzen(mitteX, mitteY)<br />
radiusSetzen(neuerRadius)<br />
randfarbeSetzen(neueRandfarbe)<br />
...
|-
|}

=== LINIE ===

{| class="wikitable "
|- style="background: #DDFFDD;"
! LINIE
|-
|farbe<br />
linienStärke<br />
...
|-
| farbeSetzen(neueFüllfarbe)<br />
linienStärkeSetzen(neueLinienStärke)<br />
endpunkteSetzen(x1, y1, x2, y2)<br />
...
|-
|}

=== DREIECK ===

{| class="wikitable "
|- style="background: #DDFFDD;"
! DREIECK
|-
|füllfarbe<br />
randfarbe<br />
...
|-
| füllfarbeSetzen(neueFüllfarbe)<br />
randfarbeSetzen(neueRandfarbe)<br />
eckenSetzen(x1,y1,x2,y2,x3,y3)<br />

...
|-
|}

== Einführung ==

Wir wollen nun gemeinsam Schritt für Schritt das allseits bekannte Zeichenspiel "Haus vom Nikolaus" mit EOS programmieren. <br />
<u>Vorüberlegungen:</u> Aus objektorientierter Sichtweise besteht das "Haus vom Nikolaus" aus mehren Objekten: <br />
einem Objekt der Klasse [[Hands_on_Objects_mit_EOS#DREIECK|DREIECK]] (dach), einem Objekt der Klasse [[Hands_on_Objects_mit_EOS#RECHTECK|RECHTECK]] (haus) und zwei Objekten der Klasse [[Hands_on_Objects_mit_EOS#LINIE|LINIE]] (diagonale1 und diagonale2). <br />
Mit diesem Wissen wollen wir nun beginnen das Zeichenspiel Schritt für Schritt zu programmieren.

=== Schritt 1 ===
[[Datei:Eos haus schritt1.png|thumb|Zeichenfenster zu EOS Programm "Haus vom Nikolaus" - Schritt 1]]
Als erstes benötigen wir ein Objekt der Klasse FENSTER, das sozusagen die Zeichenfläche zur Verfügung stellt. Dies erzeugen wir mit nachfolgendem Programmtext: <br />
<code> 
'''fenster:FENSTER'''
</code>
<br />
<br />
<br />
Um das Programm zu starten, musst du auf den blauen "Play"-Button klicken. <br />
[[Datei:EOS2 Programm starten.png]] 
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr>

=== Schritt 2 ===
[[Datei:Eos haus schritt2.png|thumb|Zeichenfenster zu EOS Programm "Haus vom Nikolaus" - Schritt 2]]
Wir wollen als nächstes mit dem Haus beginnen und erzeugen hierfür ein Objekt der Klasse RECHTECK:<br />
<code> 
fenster:FENSTER <br />
<br />
'''haus:RECHTECK''' <br />
</code>
<br />
Wir müssen nun mit Hilfe von Methodenaufrufen die Attributwerte des Objekts mit dem Bezeichner "haus" ändern: <br />

<code> 
fenster:FENSTER <br />
<br />
haus:RECHTECK <br />
'''haus.eckenSetzen(0,50,50,50)''' <br />
'''haus.füllfarbeSetzen(weiss)''' <br />
</code>
<br />
Nun muss dem Zeichenfenster jedoch noch mitgeteilt werden, das es unser Objekt der Klasse RECHTECK auch zeichnen soll, dies erledigt man folgendermaßen: <br />

<code> 
fenster:FENSTER <br />
<br />
haus:RECHTECK <br />
haus.eckenSetzen(0,50,50,0) <br />
haus.füllfarbeSetzen(weiss) <br />
'''fenster.zeichne(haus)'''
</code>
<br />
<br />
<hr>

=== Schritt 3 ===
[[Datei:Eos haus schritt3.png|thumb|Zeichenfenster zu EOS Programm "Haus vom Nikolaus" - Schritt 3]]
Jetzt ist das Dach an der Reihe. Wie du wahrscheinlich bereits vermutet hast, brauchen wir hierfür ein Objekt der Klasse DREIECK. Wir erzeugen dieses Objekt und rufen auch gleich die entsprechenden Methoden auf:

<code> 
fenster:FENSTER <br />
<br />
haus:RECHTECK <br />
haus.eckenSetzen(0,50,50,0) <br />
haus.füllfarbeSetzen(weiss) <br />
fenster.zeichne(haus)<br />
<br />
'''dach:DREIECK''' <br />
'''dach.eckenSetzen(0,50,25,75,50,50)''' <br />
'''dach.füllfarbeSetzen(weiss)''' <br />
'''fenster.zeichne(dach)'''
</code>
<br />
<br />
<hr>

=== Schritt 4 ===
[[Datei:Eos haus schritt4.png|thumb|Zeichenfenster zu EOS Programm "Haus vom Nikolaus" - Schritt 4]]
Als nächtes wollen wir die diagonale Linie von links oben nach rechts unten programmieren. Dazu erstellen wir uns ein Objekt der Klasse LINIE und rufen wieder die passenden Methoden auf:

<code> 
fenster:FENSTER <br />
<br />
haus:RECHTECK <br />
haus.eckenSetzen(0,50,50,0) <br />
haus.füllfarbeSetzen(weiss) <br />
fenster.zeichne(haus)<br />
<br />
dach:DREIECK<br />
dach.eckenSetzen(0,50,25,75,50,50)<br />
dach.füllfarbeSetzen(weiss) <br />
fenster.zeichne(dach) <br />
<br />
'''dia1:LINIE''' <br />
'''dia1.endpunkteSetzen(0,50,50,0)''' <br />
'''fenster.zeichne(dia1)''' <br />
</code>
<br />
<br />
<hr>

=== Schritt 5 ===
[[Datei:Eos haus schritt5.png|thumb|Zeichenfenster zu EOS Programm "Haus vom Nikolaus" - Schritt 5]]

Jetzt noch die zweite Diagonale einfügen:

<code> 
fenster:FENSTER <br />
<br />
haus:RECHTECK <br />
haus.eckenSetzen(0,50,50,0) <br />
haus.füllfarbeSetzen(weiss) <br />
fenster.zeichne(haus)<br />
<br />
dach:DREIECK<br />
dach.eckenSetzen(0,50,25,75,50,50)<br />
dach.füllfarbeSetzen(weiss) <br />
fenster.zeichne(dach) <br />
<br />
dia1:LINIE<br />
dia1.endpunkteSetzen(0,50,50,0)<br />
fenster.zeichne(dia1) <br />
<br />
'''dia2:LINIE'''<br />
'''dia2.endpunkteSetzen(0,0,50,50)'''<br />
'''fenster.zeichne(dia2)'''
</code>