RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Implement a Browser Command Line with JavaScript

AJAX techniques offer sophisticated GUIs on the web, but sometimes you need to execute commands at the command line. This article demonstrates how to build a custom command line you can add to your user interface—and even get a free run-time scripting engine.

s science fiction writer Neal Stephenson wrote, "In the beginning was the command line." Before the web and graphical user interfaces (GUIs), computer operators used the lowly command line to control their computers. As antiquated as the command line is, you can still find it in any major, modern operating system. The DOS shell survived intact within early versions of Windows, and its descendant, the Command Prompt, exists in even the latest versions of Windows. And the venerable Unix shells live on in GNU/Linux and other Unix variants, including Mac OSX.

This article describes how to implement a command line in a browser using JavaScript, which has a certain irony. Browsers use graphics heavily and JavaScript exists primarily to activate those graphics, yet the JavaScript technique in this article actually strips away the graphics to get at the unadorned command line.

You can use the command line described in this article in many ways. It can be a, quick shortcut on your homepage, enabling a web search with just a few keystrokes. Or, it can be a part of a larger system, allowing access to features that don't have a graphical interface—or at least, don't have one yet.

The browser command line also is extensible; you can easily define your own commands. Also, because it's written in JavaScript, you don't have to compile or link; you can just hit reload and run your new command. Personally, I like the browser command line because moving my hand from the keyboard to the mouse and back again takes more too much time.

Trying It Out
First, let's take a look at the command line (see Figure 1). If you want to try it out yourself with source code, simply unpack the code download and direct your browser to the "index.html" file. This will, in turn, load "bcl.js", which contains the implementation of the command line. You can also extract the form HTML from "index.html" and add it to your own web page. Just make sure that the <script> tag (which loads "bcl.js") is loading it from the correct directory.

Click to enlarge

Figure 1. The Browser Command Line

One of the example commands is g, which does a Google search. Figure 2 shows using the command g command line for the phrase "command line."

Click to enlarge

Figure 2. Doing a Google Search

When you press Return, the command line sends you to Google, searching for "command line". Figure 3 shows the results.

Click to enlarge

Figure 3. The Resulting Search

You can also go directly to image search, using the command line g i command line.

Yet another command is al, which simply calls the JavaScript alert() function. This isn't very useful, but it shows what the command line can do.

Now, take a look inside the code to see how it works.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date