Prev <<   >> On to the next chapter: Mutating Madlibs.

A Brief Poem

Can a computer write a poem? We begin with a brief poem (written by me, not a computer) in HTML:

Every web browser renders pages in HTML, a language that organizes text using tags in angle brackets as shown here.

The HTML tags <h2> and <p> define purpose and formatting: <h2> is "heading 2" and <p> is "paragraph". Most HTML elements are made with matching begin and end tags. For example, the <center> tag matches the </center> tag; together they form an element that centers a range of text and nested elements.

Elements can have attributes such as the style attribute here that specifies big 64-pixel margins on the main <body> of the HTML page.

There are about 90 different HTML elements (full list) and more than 100 built-in attributes (full list). Styles can set more than 100 properties other than "margin" (full list). But there are only a few elements, attributes, and styles the we need to understand to get started.

HTML is Three Languages in One

There are two important HTML elements that are not shown in this example: the <script> and <style> elements, used to embed two other languages into HTML.

  1. <script> embeds Javascript, the main programming language that we will be learning. Code written within a <script> element in HTML is interpreted immediately while the page is loading, and can be used to set up functions to be run later when the user interacts with the web page.
  2. <style> embeds CSS, a formatting language that provides a number of options for arranging items on the screen. The style attribute also embeds CSS, and the style="margin: 64px" attribute applies a CSS declaration to the single <body> element. Within a <style> element, a full CSS stylesheet can specify formatting rules for entire classes of elements at once.

The next example shows how <script> is used, and <style> is explained in the next chapter.

On these pages I have provided buttons to let you edit the HTML examples or download them directly, but wherever you are on the web, you can always view, download and edit HTML source code. All you need to do is find the "View Source" menu in your browser. Once you see the source, you can make a copy and edit it using a plain text editor like Notepad or WordPad on Windows, TextEdit on Mac, or a free editor like Notepad++.

Things to Try

A Custom Poem

To have the computer select words for the poem we will need to write some code. Here is an example using the <script> element.

On this page, a couple of the words have been replaced using scripts. These scripts run while the page loads.

The first script defines a function called choose that acts upon a list of words (the parameter we happen to call "list"). The function has two steps:

  1. Pick a random number n based on the length of the list.
  2. Use the built-in document.write function to write the nth word into the document.

The second script calls the previously-defined choose function, passing it a specific list of words within square brackets. Calling the choose function in the script in the middle of loading causes a randomly chosen word to be written straight into the document right where the script appears, after the word "A" and before the words "Nautical Poem."

The third script is similar (just different words).

When you open this HTML page, all the scripts run instantly as the page is loaded, and you see a custom poem created just for you. Try running it more than once.

Javascript Functions

When we define the choose function, the code does not execute right away, but only later when the function is called. The function definition defining choose has four parts:

  1. function is a special javascript keyword that says that a function is being defined.
  2. choose is the name we picked for the function. We could pick any name or even skip the name. In the next example we will see some functions without a name.
  3. Parentheses must come next before the body of the function. The parentheses enclose an optional sequence of arguments to be passed to a function call. In our case, there is exactly one argument that we name list so we can remember that it should be a list of words. Even if there are no arguments, you must put a pair of empty parentheses before the function body.
  4. Curly braces must contain the body of the function that contains the code to be executed later during a function call. The code in the body typically uses the arguments to do some computation. Here we do some computations that use the list argument.

The function call has two parts:

  1. choose, the function name, immediately followed by:
  2. the arguments within (...) parentheses. Here we are actually sending only a single argument, which is a list made within square brackets.

When calling a function, the parentheses are not optional, so you cannot call "choose[...]" - you must call choose(...). Even if you want to call a function with no arguments, you must use an empty pair of parentheses to indicate you are making a call, rather than just talking about the function itself as an object.

The use of functions to define and defer execution seems simple, but functions are the most important concept in computer science.

Picking a Random Item

Javascript provides many built-in functions that do useful things. For example, to choose a random number we used two functions from the built-in Math object:

Can you see why the following expression assigns to n a random integer from 0 to list.length-1?

var n = Math.floor(Math.random() * list.length);

Another built-in object is the document object. Here we have used the document.write function:

The line of code below writes the the randomly selected word into the document.

document.write(list[n]);

The square brackets in list[n] mean "look up the nth item in the list array." Elements in javascript arrays are numbered starting with #0 and their last item is #length-1, so the way we have chosen n to range from 0 to length-1 is perfect.

Things To Try


Prev <<   >> On to the next chapter: Mutating Madlibs.