Creating Documents Using JavaScript

Problem Statement 2.D.1

You are a member of the team responsible for
designing the Earnest Bank Web Site. The team
leader has asked you to modify the home page to:
Include a Login button. When the customer clicks
on the Login button, the login page should be
displayed. The login page should accept the
account ID and the password and should have a
Submit button.
Display the login page automatically after five
seconds, if the customer does not click the login
button on the home page.
Create the Web page for the site.

NIIT

JavaScript/Lesson 2/Slide 1 of 38

Creating Documents Using JavaScript

Task List
Identify the interface requirements
Identify the method to display the login page
automatically
Identify the events
Write the code for the login page
Write the code to display the login page automatically

Execute and verify the page

NIIT

JavaScript/Lesson 2/Slide 2 of 38

Creating Documents Using JavaScript

Task 1: Identify the interface requirements
As per the problem, two pages are required. The
opening page (home page) should have a Login
button. The second page should have the login and
password text boxes and a Submit button.

NIIT

JavaScript/Lesson 2/Slide 3 of 38

Creating Documents Using JavaScript

Task 2: Identify the method to display the login
page automatically
The setTimeout() method:
Is used to display a message or a new window
automatically after a specific time period has
elapsed
Syntax:
ID=setTimeout(expression,time in
milliseconds)

NIIT

JavaScript/Lesson 2/Slide 4 of 38

Creating Documents Using JavaScript

Task 2: Identify the method to display the login
page automatically (Contd.)
The clearTimeout() method:
Is used to cancel the setTimeout() method

Syntax:
clearTimeout(ID)

NIIT

JavaScript/Lesson 2/Slide 5 of 38

Creating Documents Using JavaScript

Task 3: Identify the events
The onClick event
Is fired when a user clicks on a button
The open() method of the window Object
Is used to open a new window
Syntax:
Open(url,name, options);
where:

url is the path of the document to be opened

name is the name of the document
The options argument represents a string that
controls how the new Web browser will appear
NIIT

JavaScript/Lesson 2/Slide 6 of 38

Creating Documents Using JavaScript

Just a Minute
Write the code to open Registration.html in a new
window with scroll bars and a status bar

NIIT

JavaScript/Lesson 2/Slide 7 of 38

Creating Documents Using JavaScript

Task 4: Write the code for the login page

NIIT

JavaScript/Lesson 2/Slide 8 of 38

Creating Documents Using JavaScript

Task 5: Write the code to display the login page
automatically

NIIT

JavaScript/Lesson 2/Slide 9 of 38

Creating Documents Using JavaScript

Task 6: Execute and verify the page
Execute the page, Home page.html and click the
Login button to display the login window
Wait for five seconds and the Login window should be
displayed automatically

NIIT

JavaScript/Lesson 2/Slide 10 of 38

Creating Documents Using JavaScript

Problem Statement 2.D.2
The Earnest Bank Web site also supports a shopping
mall, where customers can shop for books. The
shopping mall makes use of the online banking
facilities provided by Earnest Bank. Add a Web page
to the site that displays a list of books along with the
price. The page should also include a Quantity column
with an Order button. The page should provide an
option to the customer to view the price of the book in
Rupees or Dollars.

NIIT

JavaScript/Lesson 2/Slide 11 of 38

Creating Documents Using JavaScript

Task List
Identify the data that needs to be displayed
Identify the data that needs to be accepted
Design the user-interface screen
Identify a mechanism to convert prices from one
currency to another
Identify the events required
Create the user interface

Embed a script in the HTML document to convert the

price from one currency to another
Associate the event with the Select statement
Verify the page
NIIT

JavaScript/Lesson 2/Slide 12 of 38

Creating Documents Using JavaScript

Task 1: Identify the data that needs to be
displayed
As per the problem statement, the data that needs to
be displayed is:
The book name and the price of each book
A list box to select the currency

NIIT

JavaScript/Lesson 2/Slide 13 of 38

Creating Documents Using JavaScript

Task 2: Identify the data that needs to be
accepted
As per the problem, the data that needs to be
accepted is:
The book name and the number of books required

NIIT

JavaScript/Lesson 2/Slide 14 of 38

Creating Documents Using JavaScript

Task 3: Design the user-interface screen
Identify the input elements to be used
Identify the names for the input elements
Organize the elements on the page

NIIT

JavaScript/Lesson 2/Slide 15 of 38

Creating Documents Using JavaScript

Task 4: Identify a mechanism to convert the
prices from one currency to another
Use a list box to select the currency

NIIT

JavaScript/Lesson 2/Slide 16 of 38

Creating Documents Using JavaScript

Task 5: Identify the events required
The onChange event:
Is fired whenever a user changes the content of an
input element

NIIT

JavaScript/Lesson 2/Slide 17 of 38

Creating Documents Using JavaScript

Task 6: Create the user interface

NIIT

JavaScript/Lesson 2/Slide 18 of 38

Creating Documents Using JavaScript

Task 7: Embed a script in the HTML document to
convert the price from one currency to another

NIIT

JavaScript/Lesson 2/Slide 19 of 38

Creating Documents Using JavaScript

Task 8: Associate the event with the Select
statement

NIIT

JavaScript/Lesson 2/Slide 20 of 38

Creating Documents Using JavaScript

Task 9: Verify the page
Select Price in Rs or Price in $ from the list box,
and view the change in the price of books

NIIT

JavaScript/Lesson 2/Slide 21 of 38

Creating Documents Using JavaScript

Problem Statement 2.P.1
Add a facility to the Earnest Bank Web site where
customers can view the minimum balance required to
open different types of accounts, such as a Savings
account, a Fixed Deposit, and a Current account. The
customer should be able to select any account type
and view the minimum balance required to open an
account.

NIIT

JavaScript/Lesson 2/Slide 22 of 38

Creating Documents Using JavaScript

Problem Statement 2.D.3
The Web page created for the shopping mall is
required to display the bill amount after the customer
has selected the Price in Rs or Price in Dollars option,
has entered the number of book(s) required, and has
clicked the Order button. The bill should be displayed
in a new window. The bill should include the title of the
book, the price of each book in rupees or amount in
dollars (as selected by the user) and the total amount.

NIIT

JavaScript/Lesson 2/Slide 23 of 38

Creating Documents Using JavaScript

Task List
Identify the data for the bill details
Identify the events required
Calculate the total amount for the purchases

Write the script for generating the bill

Verify the page

NIIT

JavaScript/Lesson 2/Slide 24 of 38

Creating Documents Using JavaScript

Task 1: Identify the data for the bill details
Result:
As per the problem, the data that needs to be
displayed is the title of the book, the amount per
title, which should be calculated as price*qty and
the total amount of the bill

NIIT

JavaScript/Lesson 2/Slide 25 of 38

Creating Documents Using JavaScript

Task 2: Identify the events required
The writeln()method
Is used to write to the document
Syntax:

orderWindow.document.writeln(<H1
Align=center> Welcome user
</H1>);

NIIT

JavaScript/Lesson 2/Slide 26 of 38

Creating Documents Using JavaScript

Task 3: Calculate the total amount for the
purchases

NIIT

JavaScript/Lesson 2/Slide 27 of 38

Creating Documents Using JavaScript

Task 4: Write the script for generating the bill

NIIT

JavaScript/Lesson 2/Slide 28 of 38

Creating Documents Using JavaScript

Task 5: Verify the page
Select Price in Rs or Price in $ from the list box,
and view the change in the price of the books.
Enter the quantity required for each book, and click
the Order button to display the total amount to be paid

NIIT

JavaScript/Lesson 2/Slide 29 of 38