In this section we describe how JavaScript and the DOM are used to
create the web page that produces the behavior at
solve.html.
solve.html, shown below, uses the same table shown in
HTML
and the DOM except for the addition of
style attributes
incorporating
CSS styles.
Note the JavaScript code:
window.onload = function() {
init();
};
-
The window object represents the current browser window.
- window.onload specifies a function to be called when a
page is loaded into the window
- That function calls init, a top-level function defined
in solve.js, that puts specific problem information into
the displayed table
Each HTML document loaded into a browser window becomes an object
accessible in JavaScript through the
document object.
The
document object represents the entire DOM node tree for a
web page.
Elements of the node tree can be accessed through the
document
object's
getElementById method.
Recall that the
select element in
solve.html was given
the ID "
selector".
The code below from
solve.js uses this ID to retrieve the DOM
node corresponding to this element and store it in a variable:
solve.html creates the
select element at the bottom of
the page, but it does not create the selection options.
That is the job of more code in
solve.js, which must create
new
option elements corresponding to the FWGC and water jug
problems.
New elements for the current web page can be created
using the
document object's
createElement method.
The code below creates an array of problems and iterates through the
array to create selection options and add them to the selector:
All HTML elements in the DOM have an
innerHTML property that
defines both the HTML code and the text that occurs between an
element's opening and closing tag.
This section gives two examples.
The code below shows how
innerHTML is used to display the
correct problem name and introduction string in
solve.html.
The currently selected problem is obtained by getting the value of
the
selectedIndex property of the
select element and
using it to index into the
problems array.
Shown below is the
tryMove function that is called when a
user clicks a move button. (We describe how to create these buttons
later.)
Messages may be displayed in response to move clicks using
the
displayMessage function, shown below.
displayMessage sets the
innerHTML of a table
row's
th element.
Note that the current state of the problem, represented by
a
textarea element and set by the
updateState function,
must use that element's
value property (
innerHTML will
not work).
This section describes how the various buttons in solve.html
are created and given their behavior.
The
Reset button is created statically in
solve.html
using the
input element with
button type.
Its behavior is determined by the JavaScript
reset
function given as the value of the
onclick attribute:
<input type="button" value="RESET" onclick="reset();"></input>
The
reset function simply returns the problem to its initial
state and updates the state display:
The move buttons are dynamically rendered by JavaScript
code when the page is first displayed or the user selects a problem.
The
createButton function, which is intended to be called while
looping through a problem's move array, creates and returns a move button for a
given
move object:
- The move object's name is used as the button's label
- The button's behavior is set by associating its onclick
event with a function that clears any previous messages and calls
the tryMove function on the move object
The move buttons for a given problem are collected into a one-column
table for display in
solve.html.
This table's rows are also dynamically rendered by JavaScript
code when the page is first displayed or the user selects a problem.
The code below shows the use of the DOM's
appendChild method for
two purposes:
- Creating a td element to be added as the only cell in a
table row
- Creating a tr element to be added as a row in the table
When the user selects a different problem, the table of move buttons
must have its rows removed before they can be replaced by those of the
newly selected problem.
The DOM collects an HTML element's children, in this case the rows of a
table, in a property called
childNodes that is an array.
The
clearTable function below uses an array
object's
length property to control a loop that removes rows
one-by-one from the table.