Javascript Console Application?

Question

Is it possible to make a console based application in JS?
This sort of all I can achieve right now. I was hoping for a in-browser console based application rather than a popup prompt :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 have composed above: there is first a prompt box then there is an if statement to check if the user entered "do_stuff" if he does not..("else") then it will display an alert box: You did not tell me something I know!

Brendan · Accepted Answer · 2012-06-12 20:44:46Z

10

Short answer: you can do just about anything using JavaScript. Here is an example console that takes a command followed by a space-delimited set of arguments, similar to many windows command line actions.

It seems like you're very new to JavaScript, and you should learn to learn how it works with the browser at its core… but I don't know what browser you're going to be using, so my example uses the YUI framework so my code isn't 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's going on by inspecting the code. I'm afraid I didn't have any time to put proper comments in.

<!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>

answered Jun 12, 2012 at 20:44

Brendan

1,87311 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brendan Over a year ago

Nope. I just figured I'd give you a console that looks/feels/functions kind of like DOS. I believe you can remove the CSS entirely and still have it function.

navidm Over a year ago

I have also realised that your commands are case sensetive, so is there a way to make it case insensetive? For instance - if I had entered: do_stuff; I could also enter: dO_StUfF

Brendan Over a year ago

Sure. Just add a .toLowerCase() to the appropriate part of the processCommand() function based on how you want that to be handled.

EL Dendo Over a year ago

can it be changed so that the input is typed in the main window (like in a standard console ?)

moonshadow · Accepted Answer · 2012-06-12 16:57:50Z

5

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

answered Jun 12, 2012 at 16:57

moonshadow

89.6k7 gold badges87 silver badges122 bronze badges

Collectives™ on Stack Overflow

Javascript Console Application?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related