Web Programming with html5, css, and JavaScript

Collector performance Web page
This chapter’s web page introduces the subject of solar collector performance by providing a 
calculator that computes noontime electric power generation of a photovoltaic solar panel as a 
function of latitude, panel slope, rated capacity, and time of year. 
FIGUre 9.26
shows what the 
FIGUre 9.26 
Collector performance web page after four calculations
411
9.21 Case Study: Dynamic Positioning and Collector Performance Web Page

---

result displays after the user performs calculations for January, March, June, and December. This 
works in the southern hemisphere as well as the northern hemisphere. Just negate the latitude, 
and negate the slope to specify a north-facing panel.
FIGUreS 9.27a
and 
9.27B
show the Collector Performance web page’s 
body
container. 
Within the form, note that there are three 
input
element text controls, and then there’s a 
select
element. We’ll describe the 
select
element in detail in the next chapter, but for now, just know 
that it’s used here to implement a list box for the user’s choice of one or more months. Because of 
the 
select
element’s 
multiple
attribute, the user is able to select multiple values from the list 
box. Look back at Figure 9.26’s browser window and identify the 
Month
label and the list box at its 
right. At the bottom of the browser window, you can see results for Jan, Mar, Jun, and Dec because 
the user chose those four months from the list box.
The 
form
’s 
select
element contains twelve 
option
elements. The text within each 
option
element is the month list box. By default, nothing is selected initially. If a user clicks the “Calcu-
late” button before selecting a month, the Calculation Results under the “Month” and “Watts per 
Square Meter” headings will be blank. However, the programmer could elect to preselect one