Online Javascript Interpreter
For the Prototype & Scriptaculous book, I wrote an interactive interpreter or ’scratchpad’, to allow easy visualisation of non-visual language features. This came in useful especially in the Prototype sections (chapters 8-10), in which objects, functions & closures, and arrays get a good workout.
It occurred to me a little while ago that I could re-use this to allow readers to experiment with code snippets that I wrote on my blog. It’s live now, and the blog is officially powered by Prototype & Scriptaculous! Here’s a quick demo to illustrate the Scriptaculous Effect.toggle() mechanism. Every time you run the code, the red square will either fade in or fade out.
if (!$('red_brick')){
new Insertion.Bottom(
"psq_output",
"<div id='red_brick' "
+"style='width:300px;height:300px;"
+"margin:6px;background-color:#f00'>"
+"</div>"
);
}
Effect.toggle('red_brick');
Here’s a simple variation, showing how Effect.toggle() can take a second argument that defines an altrenate pair of effects to toggle between - in this case BlindUp and BlindDown.
if (!$('red_brick')){
new Insertion.Bottom(
"psq_output",
"<div id='red_brick' "
+"style='width:300px;height:300px;"
+"margin:6px;background-color:#f00'>"
+"</div>"
);
}
Effect.toggle('red_brick','blind');
To run either listing interactively, just click the blue arrow button next to it. Two panels will appear, a text entry field on the left, and the output window on the right. Click the blue arrow in the toolbar of the text entry to run the code (and feel free to edit it, and play around a bit).