13

是否可以在 JS 中制作基于控制台的应用程序？
我现在可以实现的所有这些。我希望有一个基于浏览器控制台的应用程序，而不是弹出提示：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!")};


在我上面编写的 Javascript 程序中：首先有一个prompt框，然后有一个if语句来检查用户是否输入了“do_stuff”，如果他没有输入..（“ else”）然后它将显示一个警告框：你没有告诉我知道的事！

4

2 回答 2

8

简短的回答：您几乎可以使用 JavaScript做任何事情。这是一个示例控制台，它接受一个命令，后跟一组以空格分隔的参数，类似于许多 Windows 命令行操作。

看起来你对 JavaScript 很陌生，你应该学习了解它是如何与浏览器一起工作的……但我不知道你将使用什么浏览器，所以我的示例使用了 YUI 框架所以我的代码不会因为浏览器规范化而杂乱无章。

尝试将以下内容保存为 HTML 文档。然后，当您在浏览器中打开它时，尝试“do_stuff arg1 George 9 howdy”或“greet Navweb”。我希望您可以通过检查代码来弄清楚发生了什么。恐怕我没有时间发表适当的评论。

<!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>
于 2012-06-12T20:44:46.983 回答
4

最简单、最兼容的方法是使用众多 Javascript 终端仿真器库之一，例如termlib、jqueryterminal等

于 2012-06-12T16:57:50.743 回答