HTML and CSS Reference
In-Depth Information
Figure 2-13.
Clicking the button to throw the pair of dice
It is good technique to build your application in incremental steps. These applications are built using a text
editor, such as TextPad or TextWrangler. Remember to save the file as type .html— and do this early and
often. You dont have to finish before saving. When you complete the first application and have saved and
tested it, you can save it once more using a new name and then make the modifications to this new copy
to be the second application. Do the same for the third application.
Throwing a single die
The purpose of this first application is to display a random die face on the canvas, with circles laid out in
the standard way.
For any application, there are generally many approaches that would work. I realized that I could get
double duty out of some of the coding, because the pattern for the 3 die face could be made by combining
the 2 and 1 patterns. Similarly, the pattern for 5 is a combination of 4 and 1. The pattern for 6 is a
combination of the one for 4 and something unique. I could have put all the coding into the
init
function or
used a single
drawface
function. In any case, this made sense to me and I programmed and debugged it
fairly fast. Table 2-1 lists all the functions and indicates what calls what. Table 2-2 shows the complete
code, explaining what each line does.
Table 2-1.
Functions in the Singe Die Throw Application
Function
Invoked By / Called By
Calls
Init
invoked by action of the
onLoad
in the
<body>
tag
drawface
called by
init
drawface
draw1, draw2, draw4,
draw6, draw2mid
draw1
called by
drawface
in 3 places for 1, 3 and 5
