#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="appearance.css" /> #+TITLE: Using JSExplain *** TODO Generic explanatory text here * Overview The JSExplain graphical user interface is presented in Figure [[fig:000_Overall]]. It allows the users to load JavaScript programs and execute them in our JavaScript interpreter. The users have at their disposal a mechanism for step-by-step execution with various levels of granularity, exposing all of the underlying details of the execution, as described in the official ECMAScript standard. #+CAPTION: JSExplain User Interface #+NAME: fig:000_Overall #+ATTR_HTML: :width 1024px [[./screenshots/000_Overview.png]] The user interface consists of six components, as shown in Figure [[fig:001_Breakdown]]. These components are: 1. *Program Selection*, where users can choose the program that they wish to execute 2. *Current Program*, where the program that is currently being executed is displayed 3. *Program Heap State*, where the contents of the program heap at the current point in the execution of the program are displayed 4. *Navigation Panel*, which allows the users to step through the program 5. *Interpreter*, displaying the part of the interpreter code that is active at the current point in the execution of the program 6. *Interpreter State*, where the state of the interpreter at the current point in the execution of the program is displayed #+CAPTION: JSExplain User Interface Breakdown #+NAME: fig:001_Breakdown #+ATTR_HTML: :width 1024px [[./screenshots/001_Breakdown.png]] * Program Selection This component allows the users to select the program that they wish to execute. This can be accomplished in two ways. First, one can click on the list of preset examples, which brings up the selection as shown in Figure [[fig:002_PresetExamples]], and there select the example one wishes to load. Alternatively, one can load a program from a file, by clicking on the "Choose file" button. After either of these procedures, the newly loaded program is displayed in the Current Program component. #+CAPTION: Selecting preset examples #+NAME: fig:002_PresetExamples #+ATTR_HTML: :width 800px [[./screenshots/002_PresetExamples.png]] * Current Program This component serves to display the JavaScript program that we are executing. The program is shown in its entirety, whereas the part of the code that is currently being executed is highlighted in yellow. For instance, in Figure [[fig:003_StateCollapsed]], we can see that the execution of the line =x++= is in progress. * Program Heap State This component displays the entire state of the program heap at the current point in program execution. Illustratively, Figure [[fig:003_StateCollapsed]] shows the heap state before the execution of the command =x++=, highlighted in the current program component. This heap state is collapsed, in that object properties are not shown, but rather just the objects themselves. At this point, three objects exist in the heap: the global object, denoted by *this*, as well as the lexical and variable environments. #+CAPTION: Program heap, collapsed #+NAME: fig:003_StateCollapsed #+ATTR_HTML: :width 1024px [[./screenshots/003_StateCollapsed.png]] Objects can be expanded by clicking on the text =<Object>=, which is present to the left of each object's name. This expands the object and shows all of its properties. For instance, in Figure [[fig:004_StateExpanded]], one can see the expanded global object, with all of its properties, such as =Array= and =String=, which are objects themselves. Also, one can see that the global object has the property =x=, whose value is 1. #+CAPTION: Program heap, expanded #+NAME: fig:004_StateExpanded #+ATTR_HTML: :width 1024px [[./screenshots/004_StateExpanded.png]] * TODO Navigation Panel 1. Run 2. Begin/End 3. Backward/Forward 4. Source Prev/Source Next/Source Cursor * TODO Interpreter 1. JsInterpreter.js 2. JsInterpreter.pseudo 3. JsInterpreter.ml * Interpreter State The bottom part of the display is reserved for the component showing the current state of the interpreter, allowing the user an insight that is not commonly available, but which is very important in this setting. Similarly to the program heap, all of the objects and variables are shown, together with the values returned by functions. An example of such a state is shown below in Figure [[fig:005_InterpreterState]]. #+CAPTION: Interpreter State #+NAME: fig:005_InterpreterState #+ATTR_HTML: :width 1024px [[./screenshots/005_InterpreterState.png]]