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 の初心者のようで、ブラウザーのコア部分で 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

最も簡単で最も互換性のある方法は、termlib、jqueryterminalなどの多くの Javascript ターミナル エミュレーター ライブラリのいずれかを使用することです。

于 2012-06-12T16:57:50.743 に答える