cómo crear un editor de javascript en línea?

Question

Estoy aprendiendo javascript, sin embargo no es tan conveniente hacer algunos experimentos. Tienes que crear una plantilla de archivo HTML y luego insertar tu código js en él, y luego usar el navegador para abrir el archivo html. Incluso usted solo quiere ver alert("hello world"). Me pregunto si es fácil crear un editor de JavaScript en línea. La idea básica es: en un área de texto html, simplemente escriba el código js directamente, tiene un botón "Ejecutar" a continuación para ejecutar el código js. Si contiene algunos errores de sintaxis, tal vez muestre el mensaje de error. Por ejemplo: alguien ya creó uno como este: http://www.codehouse.com/webmaster_tools/javascript_editor/

Me pregunto cómo crear esto? ¿Hay algún material, blog, etc. sobre cómo crear esto? ¡Gracias!

Answer 1

¿Has considerado http://jsbin.com? Ya está equipado con varias versiones de los frameworks javascript más destacados para probar. Además, almacena su código en línea y crea una url corta para que pueda pasar ejemplos a su alrededor y volver a consultar rápidamente los elementos de interés anteriores. Verá a muchos de nosotros aquí usándolo con frecuencia para ayudarse mutuamente.

Si realmente quiere trabajar por su cuenta, puede bifurcar jsbin en github: http://github.com/remy/jsbin

Answer 2

Uso Firebug.

Puede abrir Firebug en cualquier página web, luego escriba Javascript arbitrario en la parte inferior de la pestaña Consola. Evaluará el Javascript y mostrará el resultado. ¡Incluso tiene autocompletado básico!

Sin embargo, el valor real de Firebug es su pestaña DOM.

Puede ver cualquier objeto Javascript y ver todos sus métodos y propiedades anidados todo lo que quiera. Puede inspeccionar los objetos predefinidos del navegador (window, document, etc.), los globales definidos en la página e incluso los objetos que cree en la pestaña de la consola. (haciendo clic en un objeto que obtuviste en la lista de resultados).

La pestaña DOM le mostrará toda la información que pueda desear acerca de un objeto. Incluso puede pasar el mouse sobre la palabra function en el lado derecho y ver el cuerpo de la función en una información sobre herramientas. (Y también se sangrará automáticamente)

Una vez que comience a escribir sus propias páginas, puede usar el depurador Javascript de Firebug para ayudar a que funcionen correctamente.

Answer 3

Para exploraciones interactivas utilizo bien esto:

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

o si quiero escribir un montón de código y luego ejecutarlo, he estado usando este (desde el mismo sitio) :

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

Answer 4

jsFiddle^[docs] es muy potente y es el más popular de desbordamiento de pila.

Answer 5

CodeMirror es la sintaxis que resalta 'engine' que usan jsbin y jsFiddle.

Answer 6

Creo que se puede hacer algo como esto:

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