Transcript Chapter 1
HTML
Comprehensive Concepts and Techniques
Second Edition
Project 9
Creating Pop-up Windows,
Adding Scrolling Messages,
and Validating Forms
Objectives
Explain the four basic components of a
scrolling message
Write a user-defined function to display
a scrolling message in a form text box
Describe the If statement
Define conditionals and discuss the
conditional operands
Define recursion
2
Objectives
Describe the focus() method
Write a user-defined function to
calculate mortgage payments
Validate data entry using a nested
If…Else statement
Describe the parseInt(), parseFloat(),
and isNaN() built-in functions
Describe the math pow() method
3
Objectives
Write a user-defined function to format
output in currency format
Discuss For and While loops
Use the open() method to display
another Web page in a pop-up window
Use the lastModified property to
display the date a Web page was last
modified
4
Starting Notepad and Opening the
Home.htm File
With the HTML Data Disk in drive A,
click File on the menu bar and then
click Open
Click 3½ Floppy (A:) in the Look in list
box. Type *.htm in the File name text
box, double-click the Project 9 folder,
and then press the ENTER key
Double-click the document, home.htm
If necessary, maximize the window
5
6
Inserting a Scrolling Message
on a Web Page
Display object
– Defines where the scrolling message displays
Message
– What the user sees when the message displays
Position
– The starting location in which the message first
displays in the display object
Delay
– The length of time between when a message
ends and when it starts to appear again
7
The scrolling message
will appear in this
text box
8
Creating a Form Text Box to Display
a Scrolling Message
Scroll down to the BODY section and
then click line 25
9
Press the SPACEBAR to indent
the lines as shown on the following
slide. Type <FORM Name=“msgForm”>
and then press the ENTER key. Type
<INPUT Type=“text” Name=“scrollingMsg”
Size=“23”> and then press the ENTER key.
Type </FORM> and then press the ENTER key
10
11
Creating a User-Defined Function
for a Scrolling Message
The scrollingMsg() function performs
three tasks:
– Assigns the message and a space to the
display object
– Checks for the end of the message
– Assigns the next character in the
message to the text box, starting with the
beginning position, to make the text box
scroll
12
Creating the scrollingMsg()
User-Defined Function
Click line 4
13
14
Creating the scrollingMsg()
User-Defined Function
Type <SCRIPT
LANGUAGE=“JAVASCRIPT”> and then
press the ENTER key. Type <!—Hide from
old browsers and then press the ENTER
key. Press the SPACEBAR four times. Type
var scrollMsg=“Mortgage rates are
at their LOWEST!” and then press the
ENTER key. Type var msgSpace = “-----” and then press the ENTER key. Type
var beginPos = 0 and then press the
ENTER key
15
16
Creating the scrollingMsg()
User-Defined Function
Type function scrollingMsg() { and then
press the ENTER key. Type
document.msgForm.scrollingMsg.v
alue=scrollMsg.substring(beginP
os.scrollMsg.length)+msgSpace+s
crollMsg.substring(0, beginPos)
and then press the ENTER key
17
18
Incrementing the
Position Locator Variable
19
Entering an If Statement
You must determine if the current value
of beginPos exceeds the length of the
message
20
Entering an If Statement
A condition is anything that evaluates
to True or False
Must place parentheses around the
condition
21
Conditional Operands
22
23
Entering an If Statement
Click line 11. Press the SPACEBAR
eight times. Type beginPos =
beginPos + 1 and then press the
ENTER key
24
Type if (beginPos > scrollMsg.length) {
and then press the ENTER key. Type beginPos
= 0 and then press the ENTER key. Type }
and then press the ENTER key
25
26
Using the setTimeout() Method to
Create a Recursive Function Call
The setTimeout() method calls a
function or evaluates an expression
after a specified amount of time has
elapsed
Recursion
– Used to call the same function from within
a function
27
Adding the setTimeout() Method to
Create a Recursive Function Call
With the insertion point on line 15, type
window.setTimeout(“scrollingM
sg()”, 200) and then press the
ENTER key. Type } and then press
the ENTER key three times
Type //--> and then press the
ENTER key. Type </SCRIPT> and
then press the ENTER key
28
29
Adding an Event Handler
Event handlers trigger when users
perform an action
Event handlers are not case sensitive
30
31
Entering the Event Handler to
Call the scrollingMsg() Function
Locate the <BODY> tag on line 24.
Click between the word, BODY, and
the > symbol. Press the SPACEBAR
once.
Type onload=“scrollingMsg()”
and do not press the ENTER key
32
33
Saving the HTML File
on the Data Disk
With your HTML Data Disk in drive A,
click File on the menu bar and then
click Save As
Type a:\homefinders.htm in the
File name text box, double-click the
Project 9 folder, and then click the
Save button in the Save As dialog box
34
Testing the Web Page
Start your browser. If necessary, click
the Maximize button
Click the Address bar. Type
a:\Project 9\homefinders.htm
and then press the ENTER key
35
36
The Mortgage Payment
Calculator Form
37
Assignment Statement
Used to assign a value to a text box
within a form
38
Inserting an Event Handler
in an Anchor Tag
Make sure Notepad is the active
window. Scroll down to the BODY
section. On line 41, click between the
last quotation mark and the > symbol of
the <A HREF=“#LoanCalc”> anchor
tag
39
Press the SPACEBAR once.
Type onclick=“doMort()”
and do not press the ENTER key
40
41
Writing the doMort()
User-Defined Function
Will clear all text boxes and set the
focus to the Amount of Mortgage text
box
– Setting the focus means giving attention
to an object
42
Writing the doMort()
User-Defined Function
Click line 18 in the HEAD section
Enter the following JavaScript code
43
44
Saving and Testing the Web Page
With your HTML Data Disk in drive A,
click File on the menu bar and then
click Save
Click the browser button on the taskbar
Click the Refresh button on the
browser toolbar
Click the Estimate Mortgage Payment
link
45
46
Validating the Mortgage Payment
Calculator Form
If…Else statements test a condition
47
48
49
Validating Data Criteria
Using Built-in Functions
50
Validating Data Criteria
Using Built-in Functions
Calc() user-defined function converts
and stores the text box values as
integer or floating-point numbers in
temporary variables
– Uses parseInt() and isNaN()
51
52
Entering a Calc()
User-Defined Function
If necessary, activate Notepad. Scroll
up to the HEAD section. Click line 26
Enter the following JavaScript code
53
54
Entering the Else Portion
of the Nested If…Else Statement
Click line 34
Enter the following JavaScript code
and press the ENTER key
55
56
Entering the Else Portion
of the Nested If…Else Statement
Click line 42
Enter the following JavaScript code
and press the ENTER key
57
58
Adding the Event Handler
to Call the Calc() Function
Scroll down to the BODY section inside
the table. Click line 120, directly to the
left of the rightmost > bracket
Press the SPACEBAR. Type
onclick=“Calc(MortCalc)” and
do not press the ENTER key
59
60
Saving and Testing the Web Page
With your HTML Data Disk in drive A, click
File on the menu bar and then click Save
Click the browser button on the taskbar
Click the Refresh button on the browser
toolbar
When the Web page displays, click Estimate
Mortgage Payment to display and set the
focus to the Amount of Mortgage text box
61
Saving and Testing the Web Page
Enter test data set 1, as shown below.
Press the TAB key to move to the next
text box
62
Saving and Testing the Web Page
When you have entered test data set
1, click the Calculate button
When the message box displays, click
the OK button
Click the Reset button on the Web
page
Repeat the last four steps, using the
remaining test data sets
63
64
Determining the Monthly Payment
Passing Values to the monthly() UserDefined Function
– Scroll up to the HEAD section and then
click line 52. Press the ENTER key to
insert a blank line. Click the blank line
65
Type document.MortCalc.Payment
.value=monthly(mortAmount,
mortRate,mortYears) and then
press the ENTER key
66
67
Creating the monthly() Function
Used to calculate the monthly payment
amount
Requires the mortgage amount, the
interest rate, and the number of years
the payments will be made
JavaScript will use the pow method for
this calculation
68
Math.pow() Method
69
Entering the monthly() Function
Click line 56, the line directly above the
//--> tag
Enter the following JavaScript code
and press the ENTER key
70
71
Saving and Testing the Web Page
With your HTML Data Disk in drive A,
click File on the menu bar and then
click Save
Click the browser button on the taskbar
Click the Refresh button on the
browser toolbar
If necessary, click the Amount of
Mortgage text box to place the
insertion point in the text box
72
Saving and Testing the Web Page
Type 69000 in the Amount of
Mortgage text box and then press the
TAB key
Type 7.9 in the Interest Rate as % text
box and then press the TAB key
Type 30 in the Number of Years text
box and then click the Calculate button
73
74
Formatting the Monthly Payment
Output as Currency
Must write a dollarFormat() function
which
– Takes the string value and separates
dollars from cents
– Determines the location of the decimal
point using the indexOf() method
– Separates the value to the left of the
decimal point from the value to the right of
the decimal point
75
Formatting the Monthly Payment
Output as Currency
– Inserts commas every three positions in
dollar amounts exceeding 999
– Reconstructs the string value with two
decimal places, inserts a dollar sign
immediately to the left of the first digit
without spaces, and then returns the
completed formatted value
76
Using the indexOf() Method
Used to search a string for a particular
value and returns the relative location
of that value within the string
77
Entering the Dollars Portion
Click line 63
Enter the following JavaScript code
and press the ENTER key
78
Using For Loops and While Loops
A series of statements that executes
repeatedly until it satisfies a condition
JavaScript has two types of loops
– For loop
• Relies on a conditional statement using
numeric values
– While loop
• Relies on a conditional statement that can use
either a numeric value or a string
79
For Loop
80
While Loop
81
Extracting the Dollar Portion of the
Output and Inserting Commas
Click line 69, the line directly below the
statement, decipos=valuein.length
Enter the JavaScript code on the
following slide, and then press the
ENTER key
82
83
84
Extracting the Cents Portion and
Defining the Decimal Amount
Click line 87
Enter the following JavaScript code
and then press the ENTER key
85
86
Reconstructing the Formatted Output
and Returning the Formatted Value
Click line 90
Enter the following JavaScript code
and press the ENTER key
87
88
Passing the Monthly Payment Value
to the dollarFormat() Function
Click line 53
89
90
Passing the Monthly Payment Value
to the dollarFormat() Function
Type
document.MortCale.Payment
.value=dollarFormat(document
.MortCalc.Payment.value) as the
statement
91
92
Saving and Testing the Web Page
With your HTML Data Disk in drive A, click
File on the menu bar and then click Save
Click the browser button on the taskbar
Click the Refresh button on the browser
toolbar
Enter the same test data in the text boxes:
Mortgage Amount – 69000; Interest Rate as
% - 7.9; and Number of Years – 30
Click the Calculate button
93
94
Adding a Pop-up Window
Displays over the current browser
window
Use the open() method
95
Adding a Pop-up Window
96
Entering the open() Method
to Open a Pop-up Window
Click line 94, the line directly above the
//--> tag
97
Type open(“notice.htm”,”noticeWin”,
“WIDTH=400,HEIGHT=220”) and then
press the ENTER key
98
99
Adding the Date Last Modified
Click line 171, the line directly above
the end </BODY> tag
Type <SCRIPT
LANGUAGE=“JAVASCRIPT”> and then
press the ENTER key
Type <!-- Hide from old
browsers and then press the ENTER
key
100
Adding the Date Last Modified
Press the SPACEBAR four times.
Type
document.write(“<CENTER><FONT
COLOR=‘maroon’><H5>This
document was last modified
“+document.lastModified+”
</H5></FONT></CENTER>”) and
then press the ENTER key
101
Adding the Date Last Modified
Type //--> and then press the
ENTER key
Type </SCRIPT> and then press the
ENTER key
102
103
Saving and Testing
the Finished Web Page
With the HTML Data Disk in drive A,
click File on the menu bar and then
click Save
Click the browser button on the taskbar
Click the Refresh button on the
browser toolbar
104
Saving and Testing
the Finished Web Page
Click the Close Window button to close
the pop-up window
If necessary, scroll down to verify that
the last line displays the date the page
was last modified (the date and time
the file was saved on the disk)
105
Printing the HTML File
Using Notepad
If necessary, click the Notepad button
on the taskbar to activate the Notepad
window
Click Print on the File men
106
Closing Notepad and your Browser
Click the Close button on your browser
title bar
Click the Close button on the Notepad
window title bar
107
Summary
Explain the four basic components of a
scrolling message
Write a user-defined function to display
a scrolling message in a form text box
Describe the If statement
Define conditionals and discuss the
conditional operands
Define recursion
108
Summary
Describe the focus() method
Write a user-defined function to
calculate mortgage payments
Validate data entry using a nested
If…Else statement
Describe the parseInt(), parseFloat(),
and isNaN() built-in functions
Describe the math pow() method
109
Summary
Write a user-defined function to format
output in currency format
Discuss For and While loops
Use the open() method to display
another Web page in a pop-up window
Use the lastModified property to
display the date a Web page was last
modified
110
What You Should Know
111
HTML
Comprehensive Concepts and Techniques
Second Edition
Project 9 Complete