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


Implement a Browser Command Line with JavaScript : Page 2

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.

The Form
Start by examining the form:

<form id="bclform" onSubmit="return bcl_go( this );">
<input style="background-color: #e0e0e0; font-family: monospace; font-size: 150%; font-weight: bold"
       id="bclline" type="text" name="cmd" size="80">

The only interesting part here is the id=bclline, which enables some JavaScript code on the same page to force the cursor to focus on the text field. That way, you don't have to use your mouse to click inside the text field before starting to type. Here's the code that does this:

function bcl_focus()
  var bclline = document.getElementById( "bclline" );

Finally, you want to call this when the page loads, from the 'onload' handler of the body tag:

<body onload="bcl_focus();">

The entire process is simple enough:

  1. The page loads.
  2. The text field gets focus.
  3. You type something into the text field.
  4. You press return.
  5. The command runs.

In order to run the command, however, you must first parse it.

Parsing and Interpreting the Command
Command lines can have very complicated parsers, but this is not that kind of command line. You just break the string up into individual words with whitespace. So the command g command line is broken up into the pieces "g", "command", and "line." The first word, "g", is interpreted as the command. The remaining words are interpreted as arguments to the command. This follows the design of traditional command lines.

The g i command is different, however. The full command line is g i command line. In this case, the first two words, "g" and "i", are treated as the command, and the rest as the arguments to that command. This raises the question of how you distinguish between commands and arguments. That is, how do you know that "i" is part of the g i command, and not the first word in a search for "i command line"?

Defining Command Handlers
Each command is implemented by a function. For example, to define the g command, you simply create a function called g as follows:

function g()
  // Do a Google search...

This makes it very easy to define new commands. Want to quickly create a command to do a Wikipedia search? Just create a w() function that does the search, and you can run it immediately with w command line.

Now consider the g i command, which is defined by a function called g_i:

function g_i()
  // Do a Google image search...

When you enter the command g i command line, the code checks to see if the following functions exist:


Actually, the code stops checking once it finds that g_i_command() doesn't exist; at which point, it knows that g_i() must be the intended command.

This naming convention makes it easy to define commands with multiple variants. Sure, you could have just defined gi as your image search command. But thinking of g i as a sub-command of g may help you remember the many commands you will implement. (The spacebar is a big key, and designing keyboard-based interfaces to make use of the spacebar is an excellent ergonomic choice.)

Each command function is, in a sense, a plugin. This command line is designed to make it very easy to create new commands. You don't have to create objects with special interfaces; you don't have to place the "plugin" in a specially named file; and you don't have to write code to install it. You just define the function, and you're done. This code is designed with convenience in mind.

Now take a look inside some handlers to see how they work.

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