Forgot About Dre

Open Your Javascript Console!

Today’s Groups

Homework Review

Choose one of your partner’s sketches.

Today’s Learning Objectives

Assignment

Keep Sketching!

This week you are posting text! Focus on the words themselves, but also consider how the presentation of the words will impact meaning.

Challenge: It was a Dark and Stormy Night.

Make a program that generates bad short stories that start with "It was a dark and stormy night".

The story should:

Ideally, your story should:

See also: It was a dark and stormy night.

Examples of Comp Text

Mad Libs

Mad Libs

Activity: Mad Lib Worksheet

Markov Chains

Markov Chains

Activity: Markov Chain Worksheet

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jQuery is great for finding and manipulating elements in HTML.

Using jQuery

The main function in jQuery is, wait for it… jQuery(). This function can also be accessed using the abbreviated name $().

This function actually does a few different things depending on what you pass it. One of the most important things it does is “select” elements in your HTML document.

To select items, pass jQuery() a css selector that describes what you want:

target = jQuery("body");
target = jQuery("div.fancy");
target = jQuery("#author");
target = $("#author");

Once selected, you can use jQuery to manipulate your selected item(s):

target.text("hello");
target.append( "<p>Test</p>" );
target.remove();
target.addClass("fancy");

Often you might do everything in one line:

$( "p" ).addClass("fancy");

The line above will find every p element in the document and add the fancy class to each of them.

Underscore

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

Underscore is great for working with data in a clean, functional way.

_.shuffle()

Shuffle a collection, using the modern version of the Fisher-Yates shuffle.

_.shuffle = function(obj) {
  var set = isArrayLike(obj) ? obj : _.values(obj);
  var length = set.length;
  var shuffled = Array(length);
  for (var index = 0, rand; index < length; index++) {
    rand = _.random(0, index);
    if (rand !== index) shuffled[index] = shuffled[rand];
    shuffled[rand] = set[index];
  }
  return shuffled;
};

You can use it like this:

var items = ["a", "b", "c", "d", "e"];
var shuffledItems = _.shuffle(items);
// ["b", "d", "c", "a", "e"]

_.sample()

Sample n random values from a collection. If n is not specified, returns a single random element. The internal guard argument allows it to work with map.

_.sample = function(obj, n, guard) {
  if (n == null || guard) {
    if (!isArrayLike(obj)) obj = _.values(obj);
    return obj[_.random(obj.length - 1)];
  }
  return _.shuffle(obj).slice(0, Math.max(0, n));
};

You can use it like this:

var items = ["a", "b", "c", "d", "e"];
item = _.sample(items);
// "d"
items = _.sample(items, 2);
// ["c", "b"]

Study Examples

Study Example 1: Title Generator

This example generates a book title and subtitle using a template and randomly chosen words from lists. The title and subtitle are styled with HTML/CSS. It generates ideas.

It is written in pure Javascript, without the p5.js library or jQuery.

Study Example 2: Life Expectancy

This example modifies its content to suit input provided by the user. It helps you understand this table.

It is written in Javascript, using the jQuery library.

In-class Challenge

  1. Study the examples above.
  2. Create a new script that generates a fortune using the following template.

You will [verb] a [noun] on [day of week].

Study Example 3: Markov Chain

Bill of Rights

Congress shall enjoy the right to the Militia, when in a Grand Jury, except in a witness against unreasonable searches and unusual punishments inflicted.

Hansel and Gretel

I am looking at the children out of the axe, however, rejoiced, for it until the forest dwelt a short time, he could no longer, they had never in it, and I will take the room, and she awoke, and jewels.

One Fish Two Fish

I see? One, two, three… How many fingers Do I can’t say.

The Raven

Take thy beak from out that no craven, Ghastly grim and flutter, In there and nothing more.

Related Links

example code