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