Kurze Antwort: Sie einfach alles mit JavaScript tun können. Hier ist eine Beispielkonsole, die einen Befehl gefolgt von einem durch Leerzeichen getrennten Satz von Argumenten übernimmt, ähnlich wie viele Windows-Befehlszeilenaktionen.
Es scheint, als ob Sie in JavaScript sehr neu sind, und Sie sollten lernen, wie es mit dem Browser im Kern funktioniert ... aber ich weiß nicht, welchen Browser Sie verwenden werden, also mein Beispiel verwendet das YUI-Framework, so dass mein Code nicht mit der Browser-Normalisierung überladen ist.
Versuchen Sie, die folgenden als HTML-Dokument zu speichern. Wenn Sie es dann in Ihrem Browser öffnen, versuchen Sie "do_stuff arg1 George 9 howdy" oder "greet Navweb". Ich hoffe, Sie können herausfinden, was passiert, indem Sie den Code überprüfen. Ich habe Angst, ich hätte keine Zeit, um richtige Kommentare zu setzen.
<!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>
Hmmm .... Ich sehe, Sie haben einige CSS hier verwendet, ist das wirklich neccesery? – Navweb
Nein. Ich dachte mir nur, ich würde dir eine Konsole geben, die wie DOS aussieht/fühlt/funktioniert. Ich glaube, dass Sie das CSS komplett entfernen können und immer noch funktionieren. – Brendan
Ich habe auch erkannt, dass Ihre Befehle case sensetive sind, also gibt es eine Möglichkeit, es insensitive zu machen? Zum Beispiel - wenn ich folgendes eingegeben hätte: 'do_stuff'; Ich könnte auch eingeben: 'dO_StUfF' – Navweb