BetterExamples.js

Source code at https://github.com/willemmulder/BetterExamples.js

What does it do?

It makes live Javascript examples a great experience! Click the button below or press Ctrl+R or F9 to see how it works.

var a = "SomeString";
alert(a);
var b = 42;
alert(b);
var c = a + b;
alert(c);
nonExistent();

or press Ctrl+R or F9 Or the code (not working in Opera)

Why do we need it?

Because it shows both logging and errors, right at the place where they are generated, while not interrupting the UI. We can't do that yet with alerts or console logging.

In fact, the above example would look like this in a non-BetterExample world:

Not a very good experience. In the first place, there's the popups which require user action, are only displayed one at the time, and are lacking a reference to the code that generated it. In the second place there is no proper information about errors. BetterExamples.js aims to fix that!

How do I make it work?

First, you need two DOM containers next to each other. The first contains your code and is preferably a <pre> element, so it will show your code correctly even if Javascript is not working. The second element (a div will do) will contain the log information.

	<pre class='input' id='input1'>somecode</pre> <div class='output' id='output1'/>

Second, you load jQuery, Esprima and BetterExamples.js and run an example by doing

	$(function() {
		example = new BetterExample("#input1", "#output1");
		example.run();
	});

That's it. Hope you like it!