Tracetable: Cows and Boxes - JirkaDellOro/EIA2 GitHub Wiki

Hinweise:

• Für diese Aufgabe ist kein Konzept erforderlich.
• Tun Sie sich selbst einen Gefallen und nutzen Sie für die Tracetable eine Exceltabelle. Konvertieren Sie diese für die Abgabe in eine PDF Datei und verlinken Sie diese im Steckbrief.

Aufgabe 1

1. Vervollständigen Sie die Tracetable aus der Vorlesung. Klonen Sie hierzu das EIA2-Code-Repository mit dem Code der Vorlesung in Ihren Arbeitsbereich (NICHT in Ihren EIA2 Abgaben Ordner!). Halten Sie dieses Repository ab jetzt mit Hilfe der git-Anweisung "Pull" aktuell, so haben Sie den Code immer einfach im Zugriff (in der SCM Ansicht über die drei Punkte -> pull auswählen).
   Gewöhnen Sie sich zudem an, auch bei Ihren eigenen Projekten zu Beginn der Arbeit an ihnen zunächst einen Pull durchzuführen. So werden Änderungen an ihrem Remote-Repository, die z.B. auf Github oder auf einem anderen Rechner durchgeführt wurden, zunächst in ihr lokales Repository übertragen. Sie ersparen sich damit Konflikte die auftreten, wenn die Repositories unterschiedliche Änderungen aufweisen.
2. Beschreiben Sie dann zunächst das erwartete Ergebnis und überprüfen Sie dies, indem Sie den Code laufen lassen.
3. Studieren Sie zur Vorbereitung für die nächste Vorlesung mit Hilfe des in der Vorlesung ausgegebenen Merkblatts untenstehendes Aktivitätsdiagramm. Es beschreibt den untersuchten Algorithmus.

Aufgabe 2

1. Erstellen Sie eine Tracetable zu untenstehendem TypeScript-Code.
2. Stellen Sie die zu erwartende Ausgabe grafisch auf Papier dar.
3. Bringen Sie schließlich den Code zum Laufen und überprüfen Sie das Ergebnis.
4. Verfolgen Sie den Verlauf im Debugger. Bestimmen Sie Abweichungen zu Ihrer Erwartung und erklären Sie diese.
5. Versuchen Sie ein Aktivitätsdiagramm für den Programmablauf zu konstruieren. Nutzen Sie dafür das in der Veranstaltung ausgeteilte (oder auch hier einsehbare) Merkblatt sowie das Beispiel aus der ersten Aufgabe.

namespace Boxes {
	let n: number = 5;
	let c: string;
	let x: number = 0;
	let y: number = 0;

	for (let i: number = 0; i < n; i++) {
		y += (i == 2) ? 20 : 50;
		x = (x + 170) % 400;
		switch (i) {
			case 0:
				c = "#ff0000";
				break;
			case 1:
			case 4:
				c = "#00ff00";
				break;
			case 3:
				continue;
			default:
				c = "#0000ff";
		}
		for (let a: number = 50; a > 0; a -= 20) {
			placeDiv(c, x, y, a, a);
			if (i == 4)
				break;
		}
	}

	function placeDiv(_color: string, _x: number, _y: number, _width: number, _height: number): void {
		let div: HTMLDivElement = document.createElement("div");
		document.body.appendChild(div);

		//Diese Art der CSS Zuweisung ist nicht schön und sollte vermieden werden.
		//Eine css Datei anzulegen ist deutlich besser aber in diesem Fall nicht optimal,
		//da jedes Objekt einige individuelle Attribute hat.
		//Was sich gruppieren lässt, sollte stattdessen als css Klasse angelegt werden.
		let s: CSSStyleDeclaration = div.style;
		s.border = "thin solid black";
		s.position = "absolute";
		s.backgroundColor = _color;
		s.width = _width + "px";
		s.height = _height + "px";
		s.left = _x + "px";
		s.top = _y + "px";
	}
}