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