Réponse courte: vous pouvez faire à peu près tout en utilisant JavaScript. Voici un exemple de console qui prend une commande suivie d'un ensemble d'arguments délimités par des espaces, similaire à de nombreuses actions de ligne de commande de Windows.
Il semble que vous soyez très novice avec JavaScript, et vous devriez apprendre à apprendre comment cela fonctionne avec le navigateur à la base ... mais je ne sais pas quel navigateur vous allez utiliser, donc mon exemple utilise le framework YUI pour que mon code ne soit pas encombré par la normalisation du navigateur.
Essayez d'enregistrer les éléments suivants en tant que document HTML. Ensuite, lorsque vous l'ouvrez dans votre navigateur, essayez "do_stuff arg1 George 9 howdy" ou "saluer Navweb". J'espère que vous pouvez comprendre ce qui se passe en inspectant le code. Je crains de ne pas avoir eu le temps de mettre des commentaires appropriés.
<!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 .... Je vois que vous avez utilisé des CSS ici, est-ce vraiment neccesery? – Navweb
Non. J'ai juste pensé que je te donnerais une console qui ressemble/sent/fonctionne un peu comme DOS. Je crois que vous pouvez supprimer entièrement le CSS et l'avoir encore fonction. – Brendan
Je me suis également rendu compte que vos commandes sont sensibles à la casse, donc y a-t-il un moyen de les rendre insensibles à la casse? Par exemple - si j'avais entré: 'do_stuff'; Je pourrais également entrer: 'dO_StUfF' – Navweb