L01_Boxes

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 color: 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:
                color = "#ff0000";
                break;
            case 1:
            case 4:
                color = "#00ff00";
                break;
            case 3:
                continue;
            default:
                color = "#0000ff";
        }
        
        for (let size of ["big", "medium", "small"]) {
            createBox(color, x, y, size);
            if (i == 4)
                break;
        }
    }


    function createBox(_color: string, _x: number, _y: number, _size: string): void {
        let div: HTMLDivElement = document.createElement("div");
        document.body.appendChild(div);
        div.classList.add(_size);
        div.style.backgroundColor = _color;
        div.style.left = _x + "px";
        div.style.top = _y + "px";
    }
}