Homemade Javascript Editor, Interpreter, whatever.

Description

Provides an easy-to-use Javascript editor and execution environment that's trivial to attach to an existing html page. It's useful for presentations, debugging, testing or just executing snippets of javascript code to try them out.

Usage

Type code into the first of the three textareas below and hit the execute button. (Or press Ctrl-Enter if you're using Firefox). Output of your script is written to the window below it and errors and caught exceptions are printed to the third window. The editor defines the functions `print` and `printf` which you can use output text to the output textarea. As an added utility, you may enter tabs into the textarea, though I've not been able to get this feature to work fully, and not at all under IE.

Predefined functions

• print(arg) print the argument followed by a newline.
• printf(arg, ... ) rudimentary formatted printing, supports "%s", "%d", "%x", "%o", "%b". Also appends a newline to the printed text.
• dumpProperties(obj) dumps all the properties of the argument, basically does for (var prop in obj){print(prop+":"+obj[prop])}.
• load(file_uri) load and execute a javascript source file from the server.

Examples

Try some of these examples:

	var i = 26
	alert(i)
	printf ("Decimal: %d Octal: %o Hex: %x Binary: %b ", i, i, i, i)
	
	dumpProperties(document.forms)

	load("test.js")

or this quine:

	print(document.getElementById("__input").value)

Including the Editor on a Page of Your Own.

1. Grab this file.
2. link to it on the page where you want the editor to appear like this:

   	<script src='editor.js' language="JavaScript" type="text/javascript"></script>
   

3. provide a div with the ID set to "javascript_editor" where you'd like the editor to appear like this:

   	<div id="javascript_editor"></div>
   

4. call JavaScriptEditor.init(), initialization needs to be done after the page is loaded, so a good place to do this would be the onload handler of the html-body tag.

Attaching the Editor to Other People's Pages.

It's also possible to attach the editor to arbitrary pages. Bookmark this link. Using the bookmark allows you to attach an editor to the page you're currently viewing. This feature is experimental. I.e. it doesn't work reliably. That said, the bookmarklet usually works very well, but don't expect it to work on really AJAXY, CSS-tableless pages. The problem seems to be finding the proper place in the DOM to attach the editor to.

Known Bugs / Limitations

• If you need to scroll in the editor textarea, tabbing will return the cursor to the proper position, but the position of the viewport is lost.
• Ctrl-Enter and Tabbing don't work on IE. I'm not a webdeveloper and don't use IE. It's probably an easy fix for someone who knows what they're' doing and I'd appreciate it if you let me know how it's done. I'd guess a bunch of other also doesn't work well on IE.

CREDITS

LICENSE