Interactive Javascript

The Javascript Test Bench is a web page that allows one to write and execute Javascript code interactively.

A short explanation of the options is listed below.

Input

The main input area is used to input either Javascript or HTML.

Press Ctrl+Return or click the Evaluate button to evaluate the input as Javascript. The code is evaluated using the eval function by default.

Press Examine to evaluate the input as Javascript and then show the enumerable properties if the result, if it is an object.

Press Examine DOM to evaluate the input as Javascript and then show the structure and child nodes, if the result is a DOM node.

Press Insert HTML to insert the input verbatim as HTML code. By default it is inserted into a div in the page using the innerHTML property.

Press Clear Output clear the output area. The output area is normally cleared between computations, but this behavior can be turned off.

Press Clear Insert clear the inserted HTML previously added with the Insert HTML button. This removes any type of inserted content, even closing an opened window.

History

The page retains a history of previously (sucessfully) evaluated expressions.

The < button backtracks to the previous input in the history, and displays the computed output. The output is not recomputed. The > button goes forward again. Any new expression evaluated truncates the history to the current position.

The result of the previous computation is stored in a global variable called result. It can be used directly in new Javascript expressions.

Configuration

The ^ and v buttons change the size of the input area.

The Examine depth setting determines how far to recurse when examining objects. The default lists the properties of the object, but not the properties of the properties. Rarely needs changing.

The Insert method setting determines how the Insert HTML button inserts the HTML code. There are three options:

innerHTML
The HTML is directly inserted into the page using the innerHTML property of an empty div. This is the default.
Iframe
A new iframe element is inserted into the empty div and the HTML is written to this frame using document.write.
Linked Window
A new window is opened using window.open, and the HTML is written to this window using document.write.

The Autoclear checkbox determines whether the output area is cleared between computations. The default is on.

The Use Function checkbox determines wheter the evaluation of Javascript input is performed with the eval function (as a Program) or with the Function constructor (as a Function Body). The default is to use eval.

The Catch Errors checkbox determines wheter the evaluation is contained in a try/catch block or whether the errors are left uncaught and handled by the browser. The default is catch errors.

Inserted Content

When inserted content creates a new page (using the iframe or linked window insertion methods), evaluation is performed in the scope of these pages' window objects, i.e., the global objects of the inserted pages.

The apparent change of global object is emulated by wrapping the evaluated Javascript in a with construct. The emulation is not perfect, since new global variables are placed in the original page's global object, but it is usually sufficient.

Examining values or DOM nodes works on the new page as well.


Lasse Reichstein Nielsen