HTML and CSS Reference
In-Depth Information
10
Creating Pop-Up Windows,
Adding Scrolling Messages,
and Validating Forms
Introduction
In Chapter 9, you learned how to integrate JavaScript into an HTML5 document using
variables and objects, and how to write JavaScript user-defined functions called by event
handlers. This chapter reinforces these skills and shows you how to create a scrolling
message that displays a text message in a form text field, and how to use JavaScript to
validate the data users enter into forms. The validation techniques discussed in this
chapter use the if…else statement; parseInt(), parseFloat(), and isNaN() built-in functions;
the Math object's pow() method; and the Number object's toFixed() method. Finally, the
chapter discusses how to display a pop-up window.
Project — Shoreline State Bank
Loan Calculator
Many bank, credit union, and real estate Web sites include monthly payment calculators
that help buyers determine what their monthly payments will be for a car, mortgage, or
other type of loan. These calculators generally allow buyers to input basic loan
information — loan amount, interest rate, and number of years — that is used to
estimate the monthly payment.
Shoreline State Bank has decided to improve its Web site based on a recent
customer-satisfaction survey. One of the most-requested items was a simple loan calcula-
tor that would allow customers to estimate their monthly mortgage payments. As one of
the Web developers, you have been assigned to create this new Web page.
You decide to create an interactive form that allows customers to enter the selling
price of the house and the down payment amount in a dollar amount. The form calculates
the mortgage loan amount and then allows the user to enter the loan interest rate and
select the number of years for the loan from a drop-down menu. When the user clicks the
Calculate button, the monthly mortgage payment displays. A Reset button allows the user
to restart and try different values. You also decide to add a simple scrolling message, in
which the bank says that some used car loans can be made for 100% of the purchase price.
In addition, the bank wants a pop-up window to promote the upcoming antique auto show
and to list some of their popular bank services. Figure 10-1 shows the pop-up window, the
scrolling message, and the user input form for the loan calculator.
HTML 454
