Preparing to Process Query String Arguments

Working our way towards our first full-fledged web application, we looked at the following steps so far:

• The web enabled Brackets editor
• The Node.js server platform

For the next couple of steps, I am thinking of things like this:

• Extract URL query string arguments.
• Implement a JavaScript function to do something interesting with them, e.g.:
• String sample.
• 2D graphics sample using SVG.
• 3D graphics sample using WebGL.
• Implement a REST API.
• Run our server live on the web.
• Implement a desktop application interacting with it.

Before getting to that, I'll mention what my colleagues pointed out in reaction to yesterday's post on the node.js web server:

Http-server

One of the very easiest ways to create a web server with no code whatsoever is to make use of http-server, a simple zero-configuration command-line HTTP server.

It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning, e.g. to serve static files.

Here is a minimal description by Cyrille Fauvel:

1. This step needs to be done only once per machine (e.g. –g flag). Set up Node.js http-server server:

   npm install http-server -g
   

2. Put your files in your folder.
3. Start your local node http-server server:

   [sudo] http-server <myfolder>
   

A JavaScript Function for Word Jumbling

As said, I would like to extract and process some query string arguments from the URL used to invoke the server.

Before we can get to that, let's look at some JavaScript to do something interesting with the arguments, and explore how to access them in one of the next steps.

An easy kind of data type to start playing with is strings, so I'll start by implementing a nice little self-contained string manipulation JavaScript function.

A nice example is given by the word jumbling experiment presented by James Padolsey, based on the Cmabrigde paper by Matt Davis at Cambridge University.

This function takes a word and jumbles all its 'interior' letters, leaving the first and last one intact:

function jumble(word) {

  // Rand function will return 2-part array
  // [0] -> Index of rand,
  // [1] -> random found value (from args)
  var rand = function(){
    var myRand = Math.floor(
      Math.random() * arguments.length);
    return [myRand, arguments[myRand]];
  };

  // Split passed word into array
  word = word.split('');

  // Cache word length for easy looping
  length = word.length;

  // Prepate empty string for jumbled word
  jumbled = '';

  // Get array full of all available indexes:
  // (Reverse while loops are quickest:
  // http://reque.st/1382)
  arrIndexes = [];
  while (length--) {
    arrIndexes.push(length);
  }

  // Cache word length again:
  length = word.length;

  // Another loop
  while (length--) {
    // Get a random number, must be one of
    // those found in arrIndexes
    var rnd = rand.apply(null,arrIndexes);
    // Append random character to jumbled
    jumbled += word[rnd[1]];
    // Remove character from arrIndexes
    // so that it is not selected again:
    arrIndexes.splice(rnd[0],1);
  }

  // Return the jumbled word
  return jumbled;
}

Implementing a Word Jumbling JavaScript Driven HTML Form

I made use of the jumble function to implement a simple word jumbling form right here on this page:

Input words to jumble (no punctuation, please):

Type text here

Output jumbled words:

Result text here

Here is the JavaScript code I added to grab the input text, split it into words, process them one by one, concatenate the result and populate the output text box:

function jumble_one(word) {
  var n = word.length;
  if( 2 < n )
  {
    word = word[0]
      + jumble(word.slice(1,n-1))
      + word[n-1];
  }
  return word;
}

function jumble_many(words) {
  words = words.split(' ');
  var jumbled = [];
  for( var i=0; i < words.length; ++i)
  {
    jumbled.push( jumble_one(words[i]) );
  }
  return jumbled.join(' ');
}

function jumble_many_map(words) {
  jumbled = words.split(' ').map(jumble_one);
  return jumbled.join(' ');
}

function jumble_form(f)
{
  f.output.value = jumble_many_map(f.input.value);
}

As you can see, I implemented the jumble_many function twice over, once manually iterating over the array and a second more succinct version using map instead.

Here is the form HTML definition:

<form onSubmit="submit()">
  <p>Input words to jumble (no punctuation, please):</p>
  <textarea name="input" rows="5" cols="30">Type text here</textarea>
  <br/>
  <input value="Jumble words" type="button"
    onClick="jumble_form(this.form)" />

  <p>Output jumbled words:</p>
  <textarea name="output" rows="5" cols="30"
    readonly="readonly">Result text here</textarea>
</form>

For the sake of completeness, easier debugging and playing around, here is a complete little stand-alone HTML file word_jumbling.html implementing the form and JavaScript code discussed above.

We'll continue with the rest of the steps anon

Solar Eclipse on March 20, 2015

Oh yes, before I leave, most important: don't miss the solar eclipse tomorrow, on Friday, March 20, 2015!