Embedded Files
Überblick
Überblick
Eine Fußgänger-Ampel zum Überqueren einer Straße wird durch Knopfdruck von rot auf grün geschaltet und damit gleichzeitig eine Auto-Ampel von grün auf rot.
Eine Ampelschaltung ist ein Beispiel für Beziehungen und Referenzen zwischen Objekten:
Beziehungen (Assoziationen) zwischen Objekten
Attribute und Methoden eines Objekts (genutztes Objekt) können in anderen Objekten (nutzendes Objekt) verwendet werden.
Eine wichtige Beziehung ist die enthält-Beziehung (Aggregation). Bei einer enthält-Beziehungen werden die Objekte in einer Reihe, getrennt durch einen Punkt dargestellt, an deren Ende ein Attribut steht.
Grundsätzlich wird bei Beziehungen der Zugriff auf Attribute und Methoden einer anderen Klasse dieser durch eine durch Punkte getrennte Reihe von Objekten der Klassen dargestellt, an deren Ende eine Methode oder ein Attribut steht.
Referenzen zwischen Objekten
Eine Identität des genutzten Objektes ist Attribut-Wert des nutzenden Objekts.
Referenzen sind Grundlage von Beziehungen, damit Attribute und Methoden eines Objekts (genutztes Objekt) können in anderen Objekten (nutzendes Objekt) verwendet werden.
UML-Diagramme (Unified Modeling Language)
Aufbau der Ampelschaltung
Aufbau der Ampelschaltung
Grundlage der Schaltung ist, dass JavaScript über die Methode getElementById Zugriff auf das HTML-Element Canvas (Zeichenfläche) hat.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");In der Zeichenfläche werden in den Methoden zeichnen() der Klassen Rechteck, Kreisoben und Kreisunten die Grafik-Objekte Rechteck und Kreis durch die JavaScript-Methoden rect() und arc() erzeugt, aus denen in der Klasse Ampel in der Methode zeichnen() eine Ampel zusammengebaut wird.
Das Objekt Fußgängerüberweg (ampelschaktung1) der Klasse Ampelschaltung setzt sich aus den Objekten Fußgängerampel und Autoampel (Ampel1 und Ampel2) der Klasse Ampel zusammen, die aus den Objekten Gehäuse und Lichtoben bzw. Lichtunten der Klassen Rechteck und Kreis bestehen (Die zwei Objekte Lichtoben und Lichtunten werden gebraucht, da es sonst Probleme mit mehrfacher Referenzierung gäbe.).
Die Attribute der entsprechenden Klassen für die jeweiligen Klassen, werden in den Konstruktor-Methoden festgelegt.
Aus den Klassen werden die entsprechenden Objekte durch den Operator new mit den in der Konstruktor-Methode jeder Klasse erzeugt, damit auf deren Attribute und Methoden durch die referenzierende Klasse zugegriffen werden kann.
Die Attribute werden bei der Übergabe im Konstruktor ohne var deklariert.
Die Ampeln sind Automaten mit den Zuständen grün (lichtOben: white, lichtUnten: green) und rot (lichtOben: red, lichtUnten: white) . Die Methode ampelnSchalten() der Klasse Ampelschaltung ist die ausgelöste Aktion für den Automaten mit lediglich einer Fallunterscheidungen über den Zustand des Automaten, der mit Methoden der Objekte lichtOben und lichtUnten der Klassen Kreisoben und Kreisunten geändert werden kann., was einen Zugriff auf Methoden einer anderen Klasse darstellt.
Die auslösende Aktion für den Automaten wird durch die Methode ampelnSchalten() der Klasse Ampelschaltung umgesetzt, wobei die Fahrzeugampel direkt geschaltet wird und nicht wie es eigentlich bei einer Beziehung zwischen Klassen sein sollte durch die Fußgängerampel.
Jede Klasse hat eine Methode zeichnen() zum Anzeigen der entsprechenden Objekte in der Convas (Zeichenfläche).
Die Methode ampelnSchalten() in der Klasse Ampelschaltung wird durch die Schaltfläche aufgerufen und verwendet die Methode zustandSchalten() aus der Klasse Ampel.
Klassendiagramm Ampelschaltung.png<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="350" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML canvas tag.</canvas><button onclick="Ampelschaltung1.ampelnSchalten()">Schalten</button><script>
//JavaScript wird in der Variablen c die Zeichenfläche und in der Zeichenfläche in der Variablen ctx die geometrischen Objekte Rechteck und Kreise zur Verfügung gestellt.var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klassen für die Ampelschaltung//Klasse für die Objekte Gehäuse//mit der Methode Zeichnenclass Rechteck{ constructor(ecke_x,ecke_y,breite, hoehe) { this.ecke_x=ecke_x; this.ecke_y=ecke_y; this.breite = breite; this.hoehe = hoehe; } zeichnen(){ ctx.beginPath(); ctx.rect(this.ecke_x, this.ecke_y, this.breite, this.hoehe); ctx.stroke(); }}
//Klasse für die Objekte Lichtoben und Lichtunten//mit der Methode zeichnenclass Kreis{ constructor(mittelpunkt_x, mittelpunkt_y, radius,farbe) { this.mittelpunkt_x = mittelpunkt_x; this.mittelpunkt_y = mittelpunkt_y; this.radius = radius; this.farbe=farbe; } zeichnen(){ ctx.beginPath(); ctx.arc(this.mittelpunkt_x,this.mittelpunkt_y,this.radius,0,2*Math.PI); ctx.fillStyle = this.farbe; ctx.fill(); ctx.stroke(); } }
//Klasse für die Ampel-Objekte, die aus den Objekt-Attributen Gehäuse und Lichtoben bzw. Lichtunten bestehen//mit der Methode zeichnen und der Methode zustandSchalten für die Zustände rot und gruenclass Ampel{ constructor(ecke_x,ecke_y,zustand){ this.ecke_x=ecke_x; this.ecke_y=ecke_y; this.gehaeuse=new Rechteck(this.ecke_x,this.ecke_y,100,200); this.lichtOben=new Kreis(this.ecke_x+50,this.ecke_y+50,30,this.farbe); this.lichtUnten=new Kreis(this.ecke_x+50,this.ecke_y+150,30,this.farbe); this.zustand= zustand; this.zustandSchalten(this.zustand); } zeichnen(){ this.gehaeuse.zeichnen(); this.lichtOben.zeichnen(); this.lichtUnten.zeichnen(); } zustandSchalten(zustand) { this.zustand=zustand; if (this.zustand=="gruen") { this.lichtOben.farbe="white"; this.lichtUnten.farbe="green"; } else if (this.zustand=="rot") { this.lichtOben.farbe="red"; this.lichtUnten.farbe="white"; } }}//Klasse für das Objekt Fußgängerüberweg (Ampelschaltung1)//mit der Methode zeichnen und der Methode ampelnSchaltenclass Ampelschaltung{ constructor(){ this.Ampel1=new Ampel(40,50,"rot"); this.Ampel2=new Ampel(myCanvas.width-140,50,"gruen"); } zeichnen(){ this.Ampel1.zeichnen(); this.Ampel2.zeichnen(); } ampelnSchalten(){ Ampelschaltung1.Ampel1.zustandSchalten("gruen"); Ampelschaltung1.Ampel2.zustandSchalten("rot"); this.zeichnen(); Ampelschaltung1.Ampel1.zustandSchalten("rot"); Ampelschaltung1.Ampel2.zustandSchalten("gruen"); window.setTimeout(function(){Ampelschaltung1.zeichnen();}, 1000); }}//Ampelschaltung bei Aufruf der Webseite als Objekt Ampelschaltung1 zur Verfügung stellen und die Ampelschaltung zeichnen.Ampelschaltung1=new Ampelschaltung;Ampelschaltung1.zeichnen();</script>
</body></html>
<canvas id="myCanvas" width="350" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML canvas tag.</canvas><button onclick="Ampelschaltung1.ampelnSchalten()">Schalten</button><script>
//JavaScript wird in der Variablen c die Zeichenfläche und in der Zeichenfläche in der Variablen ctx die geometrischen Objekte Rechteck und Kreise zur Verfügung gestellt.var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klassen für die Ampelschaltung//Klasse für die Objekte Gehäuse//mit der Methode Zeichnenclass Rechteck{ constructor(ecke_x,ecke_y,breite, hoehe) { this.ecke_x=ecke_x; this.ecke_y=ecke_y; this.breite = breite; this.hoehe = hoehe; } zeichnen(){ ctx.beginPath(); ctx.rect(this.ecke_x, this.ecke_y, this.breite, this.hoehe); ctx.stroke(); }}
//Klasse für die Objekte Lichtoben und Lichtunten//mit der Methode zeichnenclass Kreis{ constructor(mittelpunkt_x, mittelpunkt_y, radius,farbe) { this.mittelpunkt_x = mittelpunkt_x; this.mittelpunkt_y = mittelpunkt_y; this.radius = radius; this.farbe=farbe; } zeichnen(){ ctx.beginPath(); ctx.arc(this.mittelpunkt_x,this.mittelpunkt_y,this.radius,0,2*Math.PI); ctx.fillStyle = this.farbe; ctx.fill(); ctx.stroke(); } }
//Klasse für die Ampel-Objekte, die aus den Objekt-Attributen Gehäuse und Lichtoben bzw. Lichtunten bestehen//mit der Methode zeichnen und der Methode zustandSchalten für die Zustände rot und gruenclass Ampel{ constructor(ecke_x,ecke_y,zustand){ this.ecke_x=ecke_x; this.ecke_y=ecke_y; this.gehaeuse=new Rechteck(this.ecke_x,this.ecke_y,100,200); this.lichtOben=new Kreis(this.ecke_x+50,this.ecke_y+50,30,this.farbe); this.lichtUnten=new Kreis(this.ecke_x+50,this.ecke_y+150,30,this.farbe); this.zustand= zustand; this.zustandSchalten(this.zustand); } zeichnen(){ this.gehaeuse.zeichnen(); this.lichtOben.zeichnen(); this.lichtUnten.zeichnen(); } zustandSchalten(zustand) { this.zustand=zustand; if (this.zustand=="gruen") { this.lichtOben.farbe="white"; this.lichtUnten.farbe="green"; } else if (this.zustand=="rot") { this.lichtOben.farbe="red"; this.lichtUnten.farbe="white"; } }}//Klasse für das Objekt Fußgängerüberweg (Ampelschaltung1)//mit der Methode zeichnen und der Methode ampelnSchaltenclass Ampelschaltung{ constructor(){ this.Ampel1=new Ampel(40,50,"rot"); this.Ampel2=new Ampel(myCanvas.width-140,50,"gruen"); } zeichnen(){ this.Ampel1.zeichnen(); this.Ampel2.zeichnen(); } ampelnSchalten(){ Ampelschaltung1.Ampel1.zustandSchalten("gruen"); Ampelschaltung1.Ampel2.zustandSchalten("rot"); this.zeichnen(); Ampelschaltung1.Ampel1.zustandSchalten("rot"); Ampelschaltung1.Ampel2.zustandSchalten("gruen"); window.setTimeout(function(){Ampelschaltung1.zeichnen();}, 1000); }}//Ampelschaltung bei Aufruf der Webseite als Objekt Ampelschaltung1 zur Verfügung stellen und die Ampelschaltung zeichnen.Ampelschaltung1=new Ampelschaltung;Ampelschaltung1.zeichnen();</script>
</body></html>
Page updated
Google Sites
Report abuse