Web Programming with html5, css, and JavaScript

particular option (like “Jun”) by giving it a 
selected
attribute, like this:
Jun
Within the 
form
container, notice how the 
input
elements and the 
select
element are all 
preceded by a 
label
element having a 
for
attribute that associates the 
label
with its subsequent 
control. As you learned earlier, the 
label
element helps to describe the web page’s content, and 
it helps with web accessibility.
FIGUre 9.27a 
body
 container for Collector performance web page

Solar Collector Performance

 

 
Local Latitude (deg): 
 
Panel Slope (deg): 

Rated Watts per Square Meter: 

Month: 
 
ion>Jan Feb Mar 
Apr May Jun 
Jul Aug Sep 
Oct Nov Dec 
 

412
Chapter 9
 
Additional JavaScript Basics

---

Notice that the form’s final 
input
element, which is the 
Calculate
button, includes 
onclick="calc(this.form)"
. This triggers execution of JavaScript that generates one 
of the rows of output in Figure 9.26 under the “Calculation Results” heading. In the 
table
’s 
tr
element, the 
 
characters insert additional space between successive 
th
elements.
FIGUre 9.28
shows the bottom half of the 
head
element. The top half is not shown because 
by now it should be either familiar or a straightforward variation of what you have seen before. 
If you’d like to see the complete code, as always, you should feel free to retrieve it from the book’s 
website. In the 
style
container, the 
body
rule’s 
min-width
property keeps a narrow window 
from wrapping label text in an annoying way. The 
input:last-child
rule puts extra space 
around the 
Calculate
button. The center rule positions the table. Specifically, it adds extra space 
above and below the table. Also, it horizontally centers the table within its surrounding 
div
con-
tainer whenever the browser window is greater than the body’s minimum width.
The 
script
container in Figure 9.28 illustrates some of this chapter’s JavaScript techniques. 
The global variables, 
form
, 
altitude
, and 
cosIncidenceAngle
, facilitate information trans-
fer from one function to another.
The 
calc
function is what executes when a user presses the “Calculate” button. It starts by 
declaring and initializing a 
table
variable with a reference to the 
body
’s 
table
element. Then