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

Question

I'm learning JavaScript. However, it's not so convenient to do some experiments. You have to create a template HTML file and then embed your JavaScript code into it, and then use a browser to open the HTML file, even you just want to see alert("hello world").

I wonder if it's easy to create an online JavaScript editor. The basic idea is: in a HTML text-area, you just type in JavaScript code directly, and it has one button, "Run", below to run the JavaScript code.

If it contains some syntax errors, maybe show the error message out. For example: someone already created one like this: http://www.codehouse.com/webmaster_tools/javascript_editor/

How can I create this? Are there any materials, blog, etc. on how to create this?

Answer 1

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

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

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

Answer 4

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.