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 popup prompt :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!")};
In the Javascript Program I have composed above: there is first a prompt box then there
is an if statement to check if the user entered "do_stuff" if he does not..("else") then it will display an alert box: You did not tell me something I know!
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 popup prompt :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!")};
In the Javascript Program I have composed above: there is first a prompt box then there
is an if statement to check if the user entered "do_stuff" if he does not..("else") then it will display an alert box: You did not tell me something I know!
2 Answers
Reset to default 10Short 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>
The easiest, most compatible way is to use one of the many Javascript terminal emulator libraries such as termlib, jqueryterminal etc