![previous](/InformaticaDidactica/Issue1/Kerren/previous_motif.gif)
![up](/InformaticaDidactica/Issue1/Kerren/up_motif.gif)
Next:7. Evaluation
Up:Visualisierung
und Animation der semantischen Analyse von Programmen
Previous:5. Designprinzipien
Unterabschnitte
6. Visualisierungs-
und Lernbeispiele
Im folgenden Abschnitt zeigen und erläutern wir einige Auszüge
des Lernprogramms. Die hier abgedruckten Bilder geben von den Visualisierungen
und Animationen naturgemäß nur eine sehr unvollkommene Vorstellung.
Sie spiegeln z.T. auch lediglich die Situation wider, in denen der Benutzer
eine Animation einfrieren kann. Um sich eine bessere Vorstellung von der
Funktionsweise und dem Animationslayout zu machen, kann der interessierte
Leser die Software kostenlos downloaden [Ker98]
bzw. die unten angegebenen AVI-Videosequenzen betrachten.
6.1 Statische Animationen
Zunächst stellen wir den Teil des Lernsystems vor, in dem die Animationen
und Visualisierungen auf fest vorgegebenen Beispielen beruhen, die vom
Lernenden nicht modifiziert werden können. Dabei stellt das System
die Aufgaben der semantischen Analyse vor, erläutert die Problematik
an vielen kleinen Animationen und bietet Problemlösungen anhand von
Algorithmen an. Diese werden jeweils durch Algorithmenanimationen an einem
festen, statischen Beispiel erklärt.
Terminologie
Auf der linken Hälfte der Seite in Abb. 2
sind die in der semantischen Analyse verwendeten Begriffe kurz definiert.
Klickt man auf einen blau gefärbten Textteil,
so erscheint auf der rechten Hälfte eine detailliertere Erklärung
des gewählten Begriffs. Innerhalb dieses Bereichs lassen sich auch
ein oder mehrere Beispiele zu dem ausgewählten Begriff anzeigen.
Abbildung 2: Terminologie zur semantischen Analyse (AVI-Video,
2.9MB)
![Terminologie (klein)](/InformaticaDidactica/Issue1/Kerren/img4.gif) |
Überprüfung der Kontextbedingungen
In unserem zweiten Beispiel (Abb. 3) soll
die Funktionsweise eines Deklarationsanalysators zunächst an einer
gedachten Übersetzungssituation erläutert werden. Der rot
gefärbte Quelltext des Algorithmus kennzeichnet die aktuelle
Stelle, die auf der rechten Hälfte der Seite erklärt wird. Mit
den Steuerungsknöpfen unten in der Kontrolleiste kann der Algorithmus
komplett durchlaufen werden (Textanimation). Zu allen wichtigen Bestandteilen
des Algorithmus lassen sich Beispielanimationen aufrufen, die ihrerseits
wieder aus mehreren Seiten bestehen können.
Abbildung 3: Statische Algorithmenanimation eines Deklarationsanalysators
(AVI-Video,
5.2MB)
![Deklarationsanalysator (klein)](/InformaticaDidactica/Issue1/Kerren/img5.gif) |
Die nächste Abbildung 4 zeigt einen
Schritt in einer Animationsabfolge, die durch Anklicken des Knopfes
Ein
Beispiel aus Abb.
3 aufgerufen wird. Rechts
oben befindet sich die aktuelle Stelle im Quelltext zum Algorithmus für
den Deklarations-Analysator. Man kann die Elemente der Symboltabelle anklicken,
um eine kurze Erklärung zu dem ausgewählten Element zu erhalten.
Hier hat der Benutzer auf die erste Zelle eines Eintrags geklickt, um sich
deren Bedeutung anzeigen zu lassen. Die Symboltabelle ist als verkettete
Liste dargestellt, deren Einträge aus Strukturen von je vier Elementen
bestehen. Das erste Element ist die Blocknummer, das zweite Element die
Adresse der entsprechenden Deklaration im Syntaxbaum, etc. Die Animation
zeigt, daß bereits ein Bezeichner a
im aktuellen vierten Block neu deklariert wurde. Der Bezeichner c,
der schon im ersten Block ein deklarierendes Vorkommen hat, wird nun im
aktuellen vierten Block erneut deklariert. Dazu wird in der Symboltabelle
ein neuer Eintrag generiert und in die entsprechende Stelle der Symboltabelle
eingefügt. Genau dieser Prozess ist in der oben gezeigten Animation
zu sehen. In der Quelltextzeile rechts oben ist ein Funktionsaufruf enter_id(id,
^k) enthalten. Diese Funktion ist nun im Feld links oben zu sehen.
Der Anwender kann den Quelltext für diese Funktion zeilenweise abarbeiten
lassen. Die Animationssteuerung gestattet es, die Animation mit unterschiedlichen,
frei einstellbaren Geschwindigkeitsniveaus ablaufen zu lassen, anzuhalten
und einzelne Schritte auszuführen. Dabei wird in einer Fortschrittsleiste
(links unten) der aktuelle Stand innerhalb der Animation angezeigt.
Abbildung 4: Animation zu einer Symboltabellenoperation
![Symboltabelle (klein)](/InformaticaDidactica/Issue1/Kerren/img6.gif) |
Typinferenz
Zu dem zusammengesetzten LaMa-Ausdruck LETREC wird eine Animation
der Typkombinationsregel an einem verallgemeinerten Beispiel angezeigt
(siehe Abbildung 5). Man sieht einen
der letzten Schritte der Animation. Der Typkombinationsregel entsprechend
werden die einzelnen polymorphen Typen der Unterbaumwurzeln berechnet,
eine Typumgebung erzeugt, neue Typvariablen eingeführt, etc. Die Animation
zeigt einen Schritt in dieser Berechnung. Man sieht den Teilbaum des
LETREC-Konstrukts,
in dessen Wurzelknoten die neue Typumgebung und neue Typvariablen eingetragen
werden. Dieser expandierte Wurzelknoten entspricht der intuitiven Speicherung
der Typinformationen in den Knoten des realen Syntaxbaumes. Am Ende der
Animation wird der neue Ergebnistyp in das Feld links unten eingetragen.
Abbildung 5: Animation zur Typkombinationsregel eines LETREC-Ausdrucks
(AVI-Video,
2.8MB)
![Letrec (klein)](/InformaticaDidactica/Issue1/Kerren/img8.gif) |
6.2 Dynamische Animationen
Nun kommen wir zu den Visualisierungen, in denen der Anwender beliebige
Beispielprogramme oder -spezifikationen eingeben kann. Das Layout des resultierenden
Syntaxbaumes wird automatisch berechnet und im Anwendungsbereich angezeigt.
Der Benutzer hat Einfluß auf das Baumlayout, er kann die Abstände
von Geschwisterknoten, benachbarten Knoten und Eltern/Kind-Knoten verändern.
Weiterhin besteht die Möglichkeit den Baum in seiner Größe
zu verändern und in vier Richtungen zu orientieren. Diese Einflußmöglichkeiten
sind notwendig, um den Baum im Fenster optimal zu plazieren oder an die
Fenstergröße anzupassen. Dies erhöht die Übersichtlichkeit
bei der Animation. Alle anderen zur Visualisierung gehörenden Graphikelemente,
wie etwa kleine Informationsfenster an den einzelnen Knoten, zusätzliche
Kanten etc., werden unmittelbar an das neue Layout angepaßt. Der
Baumlayoutalgorithmus entspricht bis auf die Möglichkeit der Größenveränderung
einer Arbeit von J. Walker [Wal90]. Grenzen
in der Baumgröße sind nur durch den verfügbaren Speicher
und ein über 16 Bit Variablen adressierbares logisches Koordinatensystem
gegeben.
Überprüfung der Kontextbedingungen
Der in Abb. 6 angegebene Bildschirmausschnitt
zeigt eine Visualisierung der Überprüfung der Kontextbedingungen
eines durch den Anwender eingegebenen Beispielprogramms (s.u.). Eine komfortable
Eingabemöglichkeit dieser Programme ist der eingebaute Editor, der
auch eine Funktion zur Syntaxtprüfung bereithält. Ist das Eingabeprogramm
syntaktisch fehlerhaft, so markiert der Editor das Fehlersymptom. Syntaktische
Korrektheit ist eine Voraussetzung zur semantischen Analyse und wird daher
vom System getestet.
Abbildung 6: Visualisierung der Überprüfung der
Kontextbedingungen (AVI-Video,
3.5MB)
![Kontextbedingungen (klein)](/InformaticaDidactica/Issue1/Kerren/img9.gif) |
Der zugehörige abstrakte Syntaxbaum ist in der Abbildung fast vollständig
dargestellt. Zu einigen Syntaxbaumknoten sind die Typattribute zu sehen.
Grundlage für deren Berechnung sind die in einem Hilfsfenster (links
unten) angegebenen Typen für die im Beispielprogramm verwendeten und
eingebauten Operatoren. Für ein angewandtes Vorkommen des Bezeichners
Fakultaet
wurde das nach den Gültigkeits- und Sichtbarkeitsregeln errechnete
definierende Vorkommen nach einem Mausklick auf das angewandte Vorkommen
rot markiert und der entsprechende Link mit einer roten Kante symbolisiert.
Wird kein definierendes Vorkommen gefunden, dann öffnet sich ein Dialogfenster
mit einer entsprechenden Fehlermeldung. Der Lernende hat nun die Möglichkeit,
das Beispielprogramm abzuändern und die Analyse neu ablaufen zu lassen.
Der Pascal-Code des Beispielprogramms ist in Programm 1
angegeben. Die entsprechende Pascal-Grammatik wurde in der Online-Hilfe
definiert.
Programm 1: Pascal-Code des Eingabebeispiels
![Programm Pascal8](/InformaticaDidactica/Issue1/Kerren/img10.gif) |
Überladung von Operatoren
Unser letztes Beispiel (Abb. 7) demonstriert
die Auflösung der Überladung von Operatoren. Rechts unten ist
ein Hilfsfenster mit der aktuellen Eingabespezifikation eingeblendet, die
zuvor mit Hilfe einer Eingabemaske erstellt und syntaktisch überprüft
worden war. Der "+"-Operator ist vierfach und der "/"-Operator dreifach
überladen. Im Animationsbereich ist der auf 140% vergrößerte
Ausdrucksbaum des Eingabeausdrucks (hier "1/2+3/4") mit den zu jedem Operatorknoten
assoziierten Mengen von Definitionsalternativen zu sehen. Alle Mengen sind
nach der Berechnung einelementig, wobei die Integerkonstanten nullstellige
Operatoren vom Typ int sind. Die Überladung der Operatoren
wurde also erfolgreich aufgelöst. Im Falle eines Fehlers wäre
mindestens eine Menge mehrelementig und entsprechend markiert.
Abbildung 7: Visualisierung der Auflösung der Überladung
(AVI-Video,
2.3MB)
![Überladung (klein)](/InformaticaDidactica/Issue1/Kerren/img11.gif) |
![previous](/InformaticaDidactica/Issue1/Kerren/previous_motif.gif)
![up](/InformaticaDidactica/Issue1/Kerren/up_motif.gif)
Next:7. Evaluation
Up:Visualisierung
und Animation der semantischen Analyse von Programmen
Previous:5. Designprinzipien
Andreas Kerren , 2000-04-24
|
Benutzer: gast
Besitzer: schwill Zuletzt geändert am:
|
|
|