dabbler.org

dabbler.org is collaborative learning-to-program site for HTML,
Javascript, jQuery, Turtle graphics, and CoffeeScript.

Check out the latest, feature-rich version
on pencilcode.net.
You can put arbitrary HTML pages and other content on
Pencil Code just like you can on dabbler - just rename
your files to end in .html etc.

Template Files

Files can be written as templates so that the editor will just
focus on just the interesting parts. A simple example is
/edit/guest/turtle.html.
The raw code, which can be edited using
/edit_raw/..., is an XHTML
file that has "data-editable" attributes on any script to be edited.

Why?

The site was created by David Bau
in 2010
as a tool to use while teaching kids how to program
in Javascript. One of the main hurdles has been
getting a suitable text editor installed on kids computers.
Another hurdle has been finding a place on the
internet to host a bit of Javascript. This
website provides the simplest possible solutions to both
problems.

Some short AJAX examples for kids can be found in the
01-example directory.
The idea is to illustrate ideas in less than 100 lines of HTML.
Please feel free to add some more examples.

Most of the examples use jQuery
and some use Raphael.
You can <script src="/jquery.js">&lt/script> to include jQuery.
Same with "/raphael.js".

The online editor uses the Ace Editor to let you edit the text, and it loads and saves the
text for any page using the jQuery AJAX calls above.

Your javascript can load and save pages using the same AJAX urls.
If you want to write your own code editor, you can do it. Or if
you want to do something else that requires saving and loading
server-side state, you can do that also.