comment créer un éditeur javascript en ligne?

Question

J'apprends le javascript, mais ce n'est pas très pratique de faire quelques expériences. Vous devez créer un fichier HTML de modèle, puis y intégrer votre code js, puis utiliser le navigateur pour ouvrir le fichier html. Même vous voulez juste voir alert("hello world"). Je me demande s'il est facile de créer un éditeur javascript en ligne. L'idée de base est: dans une zone de texte html, il vous suffit de taper directement dans le code js, il y a un bouton "Exécuter" ci-dessous pour exécuter le code js. S'il contient des erreurs de syntaxe, peut-être afficher le message d'erreur. Par exemple: quelqu'un en a déjà créé un comme ceci: http://www.codehouse.com/webmaster_tools/javascript_editor/

Je me demande comment créer ceci? Y a-t-il du matériel, un blog, etc. sur comment créer ceci? Merci!

Answer 1

Avez-vous considéré http://jsbin.com? Il est déjà équipé de différentes versions des frameworks javascript les plus importants pour les tests. En outre, il stocke votre code en ligne et crée une URL courte afin que vous puissiez passer des exemples et revenir rapidement aux éléments d'intérêt précédents. Vous verrez que beaucoup d'entre nous l'utilisent souvent pour s'entraider.

Si vous voulez vraiment travailler sur votre propre, vous pouvez bifurquer jsbin sur github: http://github.com/remy/jsbin

Answer 2

Utilisez Firebug.

Vous pouvez ouvrir Firebug dans n'importe quelle page Web, puis taper arbitrairement Javascript en bas de l'onglet Console. Il va évaluer le Javascript et afficher le résultat. Il a même une saisie semi-automatique de base!

Cependant, la valeur réelle de Firebug est son onglet DOM.

Vous pouvez regarder n'importe quel objet Javascript et voir toutes ses méthodes et propriétés, imbriquées autant que vous le souhaitez. Vous pouvez inspecter les objets prédéfinis du navigateur (window, document, etc.), les globales définies sur la page et même les objets que vous créez dans l'onglet console. (en cliquant sur un objet que vous avez dans la liste des résultats).

L'onglet DOM vous montrera tous les informations que vous pourriez vouloir sur un objet. Vous pouvez même passer la souris sur le mot function dans le côté droit et voir le corps de la fonction dans une info-bulle. (Et il sera également indenté)

Une fois que vous commencez à écrire vos propres pages, vous pouvez utiliser le débogueur Javascript de Firebug pour les faire fonctionner correctement.

Answer 3

Pour les explorations interactives J'utilise soit ceci:

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

ou si je veux taper un tas de code, puis l'exécuter, je me sers de ce (à partir du même site) :

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

Answer 4

jsFiddle^[docs] est très puissant et il est le plus populaire sur le débordement de pile.

Answer 5

CodeMirror est la syntaxe mettant en évidence le 'moteur' que jsbin et jsFiddle utilisent.

Answer 6

Je pense que vous pouvez faire quelque chose comme ceci:

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