Rozek: JavaScript Experimentation Area

Andreas Rozek

JavaScript Experimentation Area

This page provides a possibility for interactive experiments with JavaScript - assuming that your browser supports this language and that you did not disable this feature! (direct shortcut to the Experimentation Area)

Please, also consider my "Hints for Reading" and the "List of Recent Changes".

Instructions

Below, you will find an "Experimentation Area" with an input area, an output area and a number of buttons:

Source Area: You may type any number of (syntactically correct) JavaScript statements into this area - they will be executed ("evaluated") as soon as you press the "Evaluate" button. Pressing "Clear" will remove any contents from the source area.

You may also use your local clipboard to transfer JavaScript code snippets to or from a text editor or any other application. Just use the common key sequences for your platform (e.g. Ctrl-X, Ctrl-C and Ctrl-V under Windows);
Output Area: Any output produced by your JavaScript code using the print() and println() functions will be shown in the output area. If desired, you may select any portion of the displayed text and copy it into the local clipboard for a later transfer into a text editor or any other program;

Apart from "common" JavaScript functions and objects (and those provided by your browser!), the code may use the following functions:

cls(): allows your code to explicitly clear the output area. The function does not yield any result;
input (Message[, Preset]) -> string: opens an input dialog and displays the given Message. The user may now enter the requested information and complete or cancel the input by pressing the appropriate button. If provided, the input field will be loaded with the given Preset before opening the dialog. Upon pressing "Ok", the function yields a string containing the given input - otherwise, it yields null indicating that the input has been aborted;
print (...): converts any given arguments to string values and writes them into the output area. The function does not yield any result;
println (...): converts any given arguments to string values, writes them into the output area and terminates the whole output with a newline character. The function does not yield any result;

Experimentation Area

Technical Description

Basically, the whole concept consists of a simple HTML form, a few JavaScript event handlers (one of them using the built-in function eval to evaluate the user's JavaScript code) and a few convenience functions which facilitate input and output operations - that's it!

In order to embed the "PlayField" into your own HTML documents just perform the following steps:

load the PlayField script "library"
All event handlers and convenient functions for the JavaScript experimentation area are part of a single script file which may be loaded by adding the following tags
```
  <script language="JavaScript1.2" type="text/javascript"
    src="http://www.Andreas-Rozek.de/Scripts/PlayField.js">
  </script>
```
into the <head>...</head> section of a HTML document;
set up a HTML form
"PlayField" assumes the presence of a form named "ScriptForm" within the HTML document and uses this information to locate the source and output areas. Such a form may be created by adding the following tags
```
  <form name="ScriptForm">
  </form>
```
somewhere within the <body>...</body> of a HTML document. Please note, that there is no need for action and method attributes;
provide a "source area"
Within this form the input area for JavaScript source code may be constructed as follows
```
  <textarea name="SourceArea" rows="10" cols="70">
  </textarea>
```
Size and (any optional) default content of the textarea may be adjusted as desired;
provide a button to clear the "source area" (optional)
The following HTML tag
```
  <input type="button" value="Clear" onclick="_clearSourceArea();">
```
defines a button which clears the "source area" when pressed. The button's label (value) may be adjusted as desired;
provide a button to evaluate the "source area"
The following HTML tag
```
  <input type="button" value="Evaluate" onclick="_evalSourceArea();">
```
defines a button which clears the "source area" when pressed. The button's label (value) may be adjusted as desired;
provide an "output area"
The output area may be constructed as follows
```
  <textarea name="OutputArea" rows="10" cols="70" readonly>
  </textarea>
```
Size and (any optional) default content of the textarea may be adjusted as desired;
provide a button to clear the "output area" (optional)
The following HTML tag
```
  <input type="button" value="Clear" onclick="_clearOutputArea();">
```
defines a button which clears the "output area" when pressed. The button's label (value) may be adjusted as desired;

Caveats

Due to its simplicity, the "PlayField" approach has a few drawbacks:

syntax errors within the user-defined JavaScript code may cause any kind of error message (or simply stop script execution without further notice) rather than being indicated as such. For that reason, you should always enter a few lines of code only - this should simplify the location of potential errors within your script;
user-defined JavaScript code does not run within a "sandbox" but within an environment provided by the actual web browser - with full access to its document object model (DOM). While this detail additionally allows to experiment with DOM features, it also holds the danger of potential side effects in case of errors within the evaluated macro;
end-less loops within the JavaScript code may block your browser. You may have to close the browser's window (showing the HTML document with the JavaScript Experimentation area) in order to stop the script;
because of this integration into the browser's document object model, the document object may be used to store any information which should "survive" a single evaluation run. Example:
document.myVariable = "here I am"; (first run)
print(document.myVariable); (second run)
But note: you should use this "feature" with great care only! Any misuse may affect the HTML page or even crash your browser - in such a case, you should better restart the browser before proceeding;
the amount of source code to be evaluated in a single run and the amount of text to be shown within the output area is limited by the capacity of the respective textarea element;

Despite these problems, the author hopes that this page helps to become familiar with JavaScript!

Source Code

The source code of this script "library" is available for download:

PlayField.js (ASCII file, 7149 bytes)

References

[1]	David Flanagan JavaScript - Das umfassende Referenzwerk O'Reilly Köln 1997, ISBN 3-930673-56-8
[2]	Stefan Münz SELFHTML - HTML-Dateien selbst erstellen (see http://www.teamone.de/selfaktuell/)

Disclaimer

Please, consider also the author's Disclaimer!


http://www.Andreas-Rozek.de/JavaScript/Libraries/PlayField/index.html	(last Modification: 08.05.2002)