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

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

Closed 8 years ago.

Improve this 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?

---

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

---

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

---

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.

---

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);
}

---

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

---

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/