8/10/2019 EAD Javascript
1/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 1 of 38
Problem Statement 2.D.1
You are a member of the team responsible fordesigning 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 bedisplayed. The login page should accept the
account ID and the password and should have aSubmit button.
Display the login page automatically after fiveseconds, if the customer does not click the loginbutton on the home page.
Create the Web page for the site.
8/10/2019 EAD Javascript
2/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 2 of 38
Task List
Identify the interface requirements
Identify the method to display the login pageautomatically
Identify the events
Write the code for the login page
Write the code to display the login page automatically
Execute and verify the page
8/10/2019 EAD Javascript
3/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 3 of 38
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 andpassword text boxes and a Submit button.
8/10/2019 EAD Javascript
4/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 4 of 38
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)
8/10/2019 EAD Javascript
5/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 5 of 38
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)
8/10/2019 EAD Javascript
6/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 6 of 38
Task 3: Identify the events
The onClickevent
Is fired when a user clicks on a button
The open()method of the windowObject
Is used to open a new window
Syntax:
Open(url,name, options);
where:
urlis the path of the document to be opened
nameis the name of the document The optionsargument represents a string that
controls how the new Web browser will appear
8/10/2019 EAD Javascript
7/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 7 of 38
Just a Minute
Write the code to open Registration.html in a new
window with scroll bars and a status bar
8/10/2019 EAD Javascript
8/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 8 of 38
Task 4: Write the code for the login page
8/10/2019 EAD Javascript
9/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 9 of 38
Task 5: Write the code to display the login page
automatically
8/10/2019 EAD Javascript
10/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 10 of 38
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
8/10/2019 EAD Javascript
11/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 11 of 38
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 bankingfacilities 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 anoption to the customer to view the price of the book in
Rupees or Dollars.
8/10/2019 EAD Javascript
12/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 12 of 38
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 onecurrency to another
Identify the events required
Create the user interface
Embed a script in the HTML document to convert theprice from one currency to another
Associate the event with the Select statement
Verify the page
8/10/2019 EAD Javascript
13/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 13 of 38
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
8/10/2019 EAD Javascript
14/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 14 of 38
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
8/10/2019 EAD Javascript
15/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 15 of 38
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
8/10/2019 EAD Javascript
16/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 16 of 38
Task 4: Identify a mechanism to convert the
prices from one currency to another
Use a list box to select the currency
8/10/2019 EAD Javascript
17/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 17 of 38
Task 5: Identify the events required
The onChange event:
Is fired whenever a user changes the content of an
input element
8/10/2019 EAD Javascript
18/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 18 of 38
Task 6: Create the user interface
8/10/2019 EAD Javascript
19/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 19 of 38
Task 7: Embed a script in the HTML document to
convert the price from one currency to another
8/10/2019 EAD Javascript
20/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 20 of 38
Task 8: Associate the event with the Select
statement
8/10/2019 EAD Javascript
21/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 21 of 38
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
8/10/2019 EAD Javascript
22/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 22 of 38
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 Savingsaccount, 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.
8/10/2019 EAD Javascript
23/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 23 of 38
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 indollars (as selected by the user) and the total amount.
8/10/2019 EAD Javascript
24/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 24 of 38
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
8/10/2019 EAD Javascript
25/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 25 of 38
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
8/10/2019 EAD Javascript
26/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 26 of 38
Task 2: Identify the events required
The writeln()method
Is used to write to the document
Syntax:
orderWindow.document.writeln( Welcome user
);
8/10/2019 EAD Javascript
27/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 27 of 38
Task 3: Calculate the total amount for the
purchases
8/10/2019 EAD Javascript
28/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 28 of 38
Task 4: Write the script for generating the bill
8/10/2019 EAD Javascript
29/29
Creating Documents Using JavaScript
NIIT
JavaScript/Lesson 2/Slide 29 of 38
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