10
votes

Comment puis-je créer un éditeur JavaScript en ligne?

J'apprends JavaScript. Cependant, ce n'est pas si pratique de faire des expériences. Vous devez créer un fichier HTML de modèle, puis incorporer votre code JavaScript, puis utiliser un navigateur pour ouvrir le. Fichier html, même que vous voulez juste voir alerte ("bonjour monde") .

Je me demande s'il est facile de créer un éditeur JavaScript en ligne. L'idée de base est la suivante: dans une zone textuelle HTML, vous devez simplement taper le code JavaScript directement, et il dispose d'une touche "Exécuter", ci-dessous pour exécuter le code JavaScript.

S'il contient des erreurs de syntaxe, affichez peut-être le message d'erreur. Par exemple: une personne déjà a créée une personne comme celle-ci: http://www.codehouse.com/webmaster_tools/javascript_editor /

Comment puis-je créer ceci? Y a-t-il des matériaux, des blogs, etc. sur la façon de créer cela?


0 commentaires

6 Réponses :


8
votes

Considérez 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 autour et renvoyer rapidement les éléments d'intérêt précédents. Vous verrez beaucoup d'entre nous ici l'utiliser fréquemment pour s'entraider.

Si vous voulez vraiment travailler seul, vous pouvez Fork JSBIN sur Github: http: // github. com / remy / jsbin


3 commentaires

Merci! Oui, j'aimerais créer mon propre, JSBIN est un peu trop lourd, tout léger? BTW, JSBIN ne donnera aucune indication sur les erreurs de syntaxe, etc.


@Williamlou Vous voulez une version de poids plus léger ... mais vous souhaitez également signaler des erreurs de syntaxe? Cela n'a aucun sens.


@Williamlou: Vous ne trouverez pas d'alternative "légère" qui a la surbrillance de la syntaxe et la déclaration d'erreur.



2
votes

Utilisez Firebug .

Vous pouvez ouvrir Firebug dans n'importe quelle page Web, puis tapisser JavaScript arbitraire au bas de l'onglet Console. Il évaluera le JavaScript et affichera le résultat. Il est même obtenu de base automatique!

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 ses propriétés, imbriquées autant que vous le souhaitez. Vous pouvez inspecter les objets prédéfinis du navigateur ( Window , document , etc.), toutes les variables globales définies sur la page, et même les objets que vous créez dans l'onglet Console (par Cliquez sur un objet que vous avez dans la liste des résultats).

L'onglet DOM vous montrera les informations toutes les informations que vous pouvez souhaiter d'un objet. Vous pouvez même mettre la souris le mot fonction dans le côté droit et voir le corps de la fonction dans une info-bulle. (Et ce sera également en retrait automatique.)

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


0 commentaires

1
votes

Pour les explorations interactives, j'utilise soit ceci:

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

ou si je veux taper dans un tas de code et ensuite l'exécuter, j'utilise cela (à partir du même site):

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


0 commentaires

2
votes

jsfiddle [docs] est très puissant et c'est le débordement de pile le plus populaire.


0 commentaires

5
votes

codemirror est la syntaxe de mise en surbrillance "moteur" que JSBIN et JSFIDDLE utilisent.


0 commentaires

3
votes

Je pense que vous pouvez faire quelque chose comme ceci:

html xxx

javascript xxx


0 commentaires