[prev]Angry Monkey Says[next]

Before we move on to the nuts and bolts of web programming, let's put together the lessons of the Introduction and Programming sections.

Example: Angry Monkey Says

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// takes an array called "things"
// and returns a random item
function pickAtRandom(things) {
  var howManyThings = things.length;
  var x = Math.random(); // 0 < x < 1
  var whichThing = Math.floor(x * howManyThings);
  return things[whichThing];
}

// a giant object literal!
var vocab = {
  opener: ["Obviously", "Despite popular belief,",
           "Wow,", "According to Wikipedia,"],
  subject: ["you", "you, my friend,", "you, sir,"],
  verb: ["are a"],
  adj: ["illogical", "vapid", "lame", "insubordinate",
    "inane", "foolish", "silly", "trivial"],
  noun: ["fool", "hypocrite", "scumbag", "traitor",
    "n00b", "troll", "spammer", "imposter", "moron"]
}

var sentence = "opener subject verb adj adj noun";
var words = sentence.split(" ");
for(var i=0; i < words.length; i++) {
  var w = words[i];
  var possibilities = vocab[w];
  words[i] = pickAtRandom(possibilities);
}
var finalInsult = words.join(" ") + ".";

print(html("<center>",
      image("http://i38.tinypic.com/aboxh3.jpg"),
      "<p>Angry Monkey says:</p><p><b>", finalInsult,
      "</b></p><br/>", link("/", "another"), "</p>",
      "</center>"));

Click to run the code.

Angry Monkey's range of vocabulary isn't exactly epic, but he's just a monkey after all!

The pickAtRandom function is a very useful bit of code that picks an item from an array at random. If the array has length 5, for example, it picks a random integer from 0 to 4 and uses that as an index. Math.random is a built-in function for getting a random, uniformly distributed number between 0.0 and 1.0. Math.floor rounds a number down to an integer, for example turning 3.14 into 3.

The vocab object is defined to have a bunch of properties whose values are arrays of strings. The only thing to watch out for here is keeping the syntax straight. For example, there's a comma after the closing bracket ] of each of the first four properties (opener through adj), but not after noun. This makes sense given that commas are used as separators, but it's easy to make a typo.

This part of the code probably requires the most explanation:

22
23
24
25
26
27
28
29
var sentence = "opener subject verb adj adj noun";
var words = sentence.split(" ");
for(var i=0; i < words.length; i++) {
  var w = words[i];
  var possibilities = vocab[w];
  words[i] = pickAtRandom(possibilities);
}
var finalInsult = words.join(" ") + ".";

On line 23, the words array is made from splitting the original "sentence". On line 29 it's joined again into the final sentence. In between, the loop replaces each original word (like "opener") with an appropriate random phrase (like "Despite popular belief,"). It does this by fetching the appropriate property from the vocab object and passing it to pickAtRandom.

Exercise: Fix the a/an problem. One glaring flaw in the sentences Monkey generates is when he says things like "a inane fool" instead of "an inane fool". Can you fix this? Note that there's a trade-off between generality (like having your code still work if the sentence structure is changed) and simplicity (not having to add too much code).

Exercise: Change the vocabulary. Give Monkey some new things to say, or perhaps make him a little less angry. Maybe he could be an Adoring Monkey or an Indifferent Monkey, or not a monkey at all! Remember, the link that says "new app from this", located below the example above, will let you edit the code in a way that you can save it and publish it on the web. (And then share it with the AppJet community on the AppJet Forum!)

Congratulations, you're now a programmer! The concepts you've learned in this section will take you far, both in writing your own web apps online and in any programming you do in the future.

The best way to become a better programmer is to write lots of programs! And the best way to write lots of programs is to use the AppJet development environment, which you've already been using in this guide. AppJet also makes it easy to share your creations with the community, your friends, and the world.

Previous Lesson: Good Habits Next Lesson: Web Development