how to create a 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 js code into it, and then use browser to open the html file. Even you just want to see alert("hello world"). I wonder if it's easy to create a online javascript editor. The basic idea is: in a html text-area, you just type in js code directly, it has one button "Run" below to run the js 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/

I wonder how to create this? Is there any materials, blog etc.. on how to create this? Thanks!

Answer 1

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

Answer 2

Use Firebug.

You can open Firebug in any webpage, 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 globals 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 3

Have you considered http://jsbin.com? It's already equiped 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 4

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 5

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 6

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