How can I create an online JavaScript editor? [closed]

Answer 1

For interactive explorations I use either this:

http://www.squarefree.com/shell/shell.html

or if I want to type in a whole bunch of code and then run it, I've been using this (from the same site):

http://www.squarefree.com/jsenv/

Answer 2

I think you can do something like this:

HTML

<textarea id="code"></textarea>

<iframe id="output"></iframe>

<button id="submit-b" onclick="update()">run</button>

JavaScript

function update()
{
    var frame = $('#output').get(0);
    var frameDoc = frame.contentDocument || frame.contentWindow.document;
    var w = document.getElementById("code").value;
    document.getElementById('output').contentWindow.document.write(w);
}

Answer 3

CodeMirror is the syntax highlighting 'engine' that jsbin and jsFiddle use.

Answer 4

Consider http://jsbin.com. It's already equipped with various versions of the most prominent JavaScript frameworks for testing. Furthermore, it stores your code online and creates a short-URL so you can pass examples around, and quickly refer back to previous items of interest. You'll see many of us here using it frequently to help each other.

If you really want to work on your own, you can fork jsbin on GitHub: http://github.com/remy/jsbin

Answer 5

Use Firebug.

You can open Firebug in any webpage and then type arbitrary JavaScript at the bottom of the Console tab. It will evaluate the JavaScript and display the result. It's even got basic autocomplete!

However, the real value of Firebug is its DOM tab.

You can look at any JavaScript object and see all of its methods and properties, nested as much as you want. You can inspect the browser's pre-defined objects (window, document, etc), any global variables defined on the page, and even objects you create in the console tab (by clicking an object that you got in the results list).

The DOM tab will show you all information you could possibly want about an object. You can even mouseover the word function in the right side and see the function's body in a tooltip. (And it will be auto-indented, too.)

Once you start writing your own pages, you can use Firebug's JavaScript debugger to help make them work correctly.

Answer 6

jsFiddle [docs] is very powerful and it's the most popular on Stack Overflow.