Javascript Console Application?

前端未结

关注

 2  1009

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 pop

相关标签:

2条回答

太阳男子

2021-02-05 19:36

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

借酒劲吻你

2021-02-05 19:44

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>

0 讨论(0)