2012-06-12 11 views
8

¿Es posible crear una aplicación basada en consola en JS?
Este tipo de todo lo que puedo lograr en este momento. que estaba esperando una aplicación basada en consola en el navegador en lugar de un indicador emergente: Paplicación de consola de Javascript?

var fname=prompt("Command:","") 
if (fname=="do_stuff") {alert("Ok, i will do stuff...")} 
else {alert("You did not tell me something i know!")}; 


En el Programa Javascript he compuesto arriba: primero hay una caja prompt entonces no es una declaración if a compruebe si el usuario ingresó "do_stuff" si no lo hace .. ("else") entonces mostrará un cuadro de alerta: ¡No me dijo algo que sé!

Respuesta

8

Respuesta corta: se puede hacer casi cualquier cosa uso de JavaScript. Aquí hay una consola de ejemplo que toma un comando seguido de un conjunto de argumentos delimitado por espacios, similar a muchas acciones de línea de comandos de Windows.

Parece que eres muy nuevo en JavaScript, y deberías aprender a aprender cómo funciona con el navegador en su núcleo ... pero no sé qué navegador vas a utilizar, así que mi ejemplo usa el marco YUI para que mi código no esté saturado con la normalización del navegador.

Intente guardar lo siguiente como un documento HTML. Luego, cuando lo abra en su navegador, intente con "do_stuff arg1 howdy" o "greet Navweb". Espero que puedas averiguar qué está pasando inspeccionando el código. Me temo que no tuve tiempo para poner los comentarios adecuados.

<!doctype html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 
     <title>Console</title> 
     <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css"/> 
     <style type="text/css"> 
      html { 
       background-color: #000; 
       } 
      body { 
       font-family: "Lucida Console"; 
       font-size: 13px; 
       color: #0f0; 
       } 
      #in { 
       display: block; 
       position: fixed; 
       left: 0; 
       bottom: 0; 
       width: 100%; 
       padding: 8px; 
       border-color: #fff; 
       border-width: 1px 0 0 0; 
       background-color: #000; 
       color: #0f0; 
       } 
     </style> 
    </head> 
    <body> 
     <div id="out"></div> 
     <input id="in" tabindex="0"/> 
    </body> 
    <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.5.0/build/yui/yui-min.js"></script> 
    <script type="text/javascript"> 
     YUI().use("node", function(Y) { 

      var COMMANDS = [ 
       { 
        name: "do_stuff", 
        handler: doStuff 
       }, 

       { 
        name: "greet", 
        handler: function(args) { 
         outputToConsole("Hello " + args[0] + ", welcome to Console."); 
        } 
       } 
      ]; 

      function processCommand() { 
       var inField = Y.one("#in"); 
       var input = inField.get("value"); 
       var parts = input.replace(/\s+/g, " ").split(" "); 
       var command = parts[0]; 
       var args = parts.length > 1 ? parts.slice(1, parts.length) : []; 

       inField.set("value", ""); 

       for (var i = 0; i < COMMANDS.length; i++) { 
        if (command === COMMANDS[i].name) { 
         COMMANDS[i].handler(args); 
         return; 
        } 
       } 

       outputToConsole("Unsupported Command: " + command); 
      } 

      function doStuff(args) { 
       outputToConsole("I'll just echo the args: " + args); 
      } 

      function outputToConsole(text) { 
       var p = Y.Node.create("<p>" + text + "</p>"); 
       Y.one("#out").append(p); 
       p.scrollIntoView(); 
      } 

      Y.on("domready", function(e) { 
       Y.one("body").setStyle("paddingBottom", Y.one("#in").get("offsetHeight")); 
       Y.one("#in").on("keydown", function(e) { 
        if (e.charCode === 13) { 
         processCommand(); 
        } 
       }); 
      }); 
     }); 
    </script> 
</html> 
+0

Hmmm .... Veo que ha usado algunos CSS aquí, ¿es realmente necesario? – Navweb

+0

No. Me imaginé que te daría una consola que se ve/siente/funciona más o menos como DOS. Creo que puedes eliminar completamente el CSS y aún así tenerlo funcionando. – Brendan

+0

También me he dado cuenta de que sus comandos son sensibles a las mayúsculas y minúsculas, entonces, ¿hay alguna manera de hacerlo insensible a las mayúsculas y minúsculas? Por ejemplo, si hubiera ingresado: 'do_stuff'; También podría ingresar: 'dO_StUfF' – Navweb

4

La forma más fácil, más compatible es utilizar una de las muchas bibliotecas de emulador de terminal de Javascript como termlib, etc jqueryterminal

Cuestiones relacionadas