Javascript Console Application?

前端 未结 2 1001
北海茫月
北海茫月 2021-02-05 18:55

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)
提交回复
热议问题