Question

A JavaScript workbench

Use document.querySelector or document.getElementById to get access to the elements defined in your HTML. An event handler for "click" or "mousedown" events on the button can get the value property of the text field and call new Function on it.

Make sure you wrap both the call to new Function and the call to its result in a try block so that you can catch exceptions that it produces. In this case, we really don’t know what type of exception we are looking for, so catch everything.

The textContent property of the output element can be used to fill it with a string message. Or, if you want to keep the old content around, create a new text node using document.createTextNode and append it to the element. Remember to add a newline character to the end so that not all output appears on a single line.

Autocompletion

The best event for updating the suggestion list is "input" since that will fire immediately when the content of the field is changed.

Then loop over the array of terms and see whether they start with the given string. For example, you could call indexOf and see whether the result is zero. For each matching string, add an element to the suggestions <div> . You should probably also empty that each time you start updating the suggestions, for example by setting its textContent to the empty string.

You could either add a "click" event handler to every suggestion element or add a single one to the outer <div> that holds them and look at the target property of the event to find out which suggestion was clicked.

To get the suggestion text out of a DOM node, you could look at its textContent or set an attribute to explicitly store the text when you create the element.

Conway’s Game of Life

To solve the problem of having the changes conceptually happen at the same time, try to see the computation of a generation as a pure function, which takes one grid and produces a new grid that represents the next turn.

Representing the grid can be done in any of the ways shown in Chapters 7 and 15 . Counting live neighbors can be done with two nested loops, looping over adjacent coordinates. Take care not to count cells outside of the field and to ignore the cell in the center, whose neighbors we are counting.

Making changes to checkboxes take effect on the next generation can be done in two ways. An event handler could notice these changes and update the current grid to reflect them, or you could generate a fresh grid from the values in the checkboxes before computing the next turn.

If you choose to go with event handlers, you might want to attach attributes that identify the position that each checkbox corresponds to so that it is easy to find out which cell to change.

To draw the grid of checkboxes, you either can use a <table> element (see Chapter 13 ) or simply put them all in the same element and put <br> (line break) elements between the rows.

This is a book about getting computers to do what you want them to do. Computers are about as common as screwdrivers today, but they contain a lot more hidden complexity and thus are harder to operate and understand. To many, they remain alien, slightly threatening things.