Geek Answers Handbook

Javascript Console Application?

Is it possible to create a console application in JS?
That is all I can achieve right now. I was hoping for a console application in the browser, not a popup: P

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


In the Javascript program I wrote above: first there is a prompt field, then it is an if to check if the user do_stuff is entered if he does not. (" else "), then it will display a warning window: you did not tell me what I know!

+8
javascript html console
source share
2 answers

Short answer: you can just do it using JavaScript. The following is an example of a console that accepts a command, followed by a set of arguments separated by spaces, similar to many Windows command line actions.

It sounds like you are very new to JavaScript, and you should learn to learn how it works with the browser at its core ... but I don’t know which browser you are going to use, so my example uses the YUI structure, so my code is not cluttered with browser normalization.

Try saving the following as an HTML document. Then, when you open it in your browser, try do_stuff arg1 George 9 howdy or greet Navweb. I hope you can figure out what happens by checking the code. I'm afraid I did not have time to post relevant comments.

 <!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>
+8
source share

The easiest and most compatible way is to use one of the many Javascript terminal emulator libraries, such as termlib , jqueryterminal , etc.

+4
source share

More articles:


All Articles