Question

我正在学习javascript，但是做一些实验不太方便。您必须创建一个模板HTML文件，然后将您的js代码嵌入其中，然后使用浏览器打开html文件。即使你只想看alert("hello world")。我想知道创建一个在线javascript编辑器是否容易。基本思想是：在html文本区域中，你只需直接输入js代码，它下面有一个按钮“Run”来运行js代码。如果它包含一些语法错误，可能会显示错误消息。例如：有人已经创建了这样的：http://www.codehouse.com/webmaster_tools/javascript_editor/

我想知道如何制作这个？是否有任何材料，博客等..如何创建这个？谢谢！

Answer 1

您考虑过http://jsbin.com了吗？它已经配备了各种版本的最着名的javascript框架进行测试。此外，它会在线存储您的代码并创建一个简短的URL，以便您可以传递示例，并快速返回之前感兴趣的项目。你会看到我们这里经常使用它来互相帮助。

如果您真的想自己动手，可以在github上分叉jsbin：http://github.com/remy/jsbin

Answer 2

CodeMirror是jsbin和jsFiddle使用的突出显示'引擎'的语法。

Answer 3

我认为你可以这样做：

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 4

使用Firebug。

您可以在任何网页中打开Firebug，然后在“控制台”选项卡底部键入任意Javascript。它将评估Javascript并显示结果。它甚至有基本的自动完成功能！

但是，Firebug的真正价值在于它的DOM选项卡。

您可以查看任何Javascript对象并查看其所有方法和属性，并根据需要进行嵌套。您可以检查浏览器的预定义对象（window，document等），页面上定义的任何全局变量，甚至是您在控制台选项卡中创建的对象。（通过单击结果列表中的对象）。

DOM选项卡将显示您可能想要的有关对象的所有信息。您甚至可以将鼠标悬停在右侧的单词function上，并在工具提示中查看该功能的正文。（它也将自动缩进）

一旦开始编写自己的页面，就可以使用Firebug的Javascript调试器来帮助它们正常工作。

Answer 5

jsFiddle ^[docs]非常强大，它在Stack Overflow上最受欢迎。

Answer 6

对于交互式探索，我使用这个：

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

或者如果我想输入一大堆代码然后运行它，我一直在使用它（来自同一个站点）：

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

如何创建在线javascript编辑器？

6 个答案: