Other pages : • ReadMe • API Doc • Dev Doc • Notes • Issues • Changes • Credits
Subsections : • Synopsis • Usage ◦ 1 Link the library ◦ 2 Put box on page ◦ 3 Output lines ◦ 4 Gather input ◦ 5 Sense y/n keypress ◦ 6 Get sophisticated
Slogan : Single-file JavaScript to put up terminals on a web page
License : BSD 3-Clause License
Status : Applicable.
Here are the changes since forking from the original project :
-
Integrate beep file as base64. Pro: No external file. Con: Breaks IE<10
-
Build it with Closure Compiler in advanced mode
-
Process all pending pull request
-
Rename repository branch 'master' to 'main'
-
Supplement prompts by dynamic CSS rules
-
Supplement dedicated debug features
-
Giving the project a new dress
-
Numerous small improvements
I have stirred the code violently but maintained backward-compatibility.
Just replace terminal.js by purpleterms.js or
by purpleterms.min.js — And bingo.
The project got a bit inflated with files. Don't let this distract you.
All that matters and all you need, is one single file: purpleterms.js.
Here are the steps for a first simple PurpleTerms use case.
Include purpleterms.js or purpleterms.min.js with a script tag into
your page header. The both files operate equal, except for debugging.
As a user, you will prefer the minified version, which looks like this :
<head>
<script src="./terminaljs/purpleterms.min.js"></script>
</head>
Developers will prefer the source version :
<script src="./terminaljs/purpleterms.js"></script>
And what is that purpleterms.pretty.js? It is an intermediary
transformation for source code readers, who like to read the JavaScript code,
but without the heavy comment clutter. This would work as well.
After the library is linked, PurpleTerms is ready to operate, and you can call it in the page's body, or from a dedicated JavaScript file.
Somewhere on your page, provide a div with a distinctive ID, e.g.:
<body>
...
<div id="PLACE_FOR_TERMINAL_ONE"></div>
...
</body>
Below that, place a JavaScript sequence like this :
<body>
...
<script>
var t1 = new Terminal();
var e1 = document.getElementById('PLACE_FOR_TERMINAL_ONE');
e1.appendChild(t1.html);
<script>
...
</body>
The three code lines do the following: (1) Create a new
PurpleTerms object and give you the handle t1 to access it
(2) Search the prepared div by the ID and give you a handle e1 to access
that element (3) Tell the element e1, that it shall include the HTML
property from the Terminal t1.
Now a terminal box should appear on the page. The box is empty, not even a prompt in it. You have to tell it what to do.
The first and easiest action is to print a line. Within the script tag,
after you have acquired a terminal object as variable t1,
you tell it to print one or more lines :
t1.print('Hello PurpleTerms ' + t.getVersion() + '"');
t1.print('Let's explore this box.');
t1.print('How are you?');
This shall print three lines.
Retrieving input is no more soo trivial, since now you have to deal with asynchronous programming. This means, you fire a function call, and give that a function parameter, which executes something, whenever the user has answered.
Printing the prompt looks like that:
t1.input('How are you? Please tell me', procesTheAnswer);
Where procesTheAnswer is a function, which must be defined somewhere
in the code, e.g. immediately below. It looks like this
function procesTheAnswer(sInput) {
t1.print('Oh, your well-being is this: ' + sInput + '.');
}
If you have understood above mechanism, you may like to see below alternative writing, which is above two sequences in a single one. It is an anonymous function as parameter, saving some space and an identifyer, but you have to look really close at the bracketing:
t1.input('How are you? Please tell me', function (sInput) {
t1.print('Oh, your well-being is this: ' + sInput + '.');
});
So with the input(), you print some message, prompting the user to write
something and to finish her writing with Enter. Only after the user presses
the Enter key, all she typed, is captured as input.
Sometimes, you need not a string from the user, but one plain keypress
suffices, either y for yes or n or any other key for no. This can
be done with the confirm() method.
t1.confirm('Are you hungry?', function (b) {
if (b) {
t1.print('I try to order you a pizza.'); // answered with y
}
else {
t1.print('Fine. Then we can have a walk.'); // answered with n
}
});
Inspect the demo files with their varying degree of sophistication :
aloha.html
simple.html
custom.html
develop.html
Or try them
online
project 20190208°1711 file 20190213°0211