JavaScript

Case Study to be used for

Hands-on Sessions

© 2007, Cognizant Technology Solutions. All Rights Reserved.

The information contained herein is subject to change without notice.
C3: Protected
About the Author

Created By: Gurrala Venkata, Anil Kumar (118497)

Credential Sun Certified Java Programmer

Information:

Version and JSCRIPT/PPT/0108/1.0

Date:

2
Icons Used

Hands on 
Questions Tools Exercise

Coding  Test Your 
Reference
Standards Understanding

A Welcome 
Try it Out Contacts
Break

3
Case Study Overview

ƒ Introduction:
This case study is about the design of an online application
form for a University, which has all its affiliations spread
across various states of India.
It applies the concepts of Java Script for Client Side
Validation. It also covers the usage of DOM Model and
Event Handling mechanism of Java Script.

4
Case Study – University Registration
Form
ƒ User will get a form to register for once, as he
log on to the University Portal for Registration.
ƒ Registration Form will have the following details
to be filled by the User:
» First Name
» Last Name
» Address
» Email id
» City
» State
» University Branch Name

5
Case Study – University Registration
Form (Contd.)
» Phone number
» Enrolled Course
» Date of Test
» Written Test Marks
ƒ Form has a submit button to submit the details.

6
Case Study – University Registration
Form (Contd.)
1. First Name or Last Name: It should contain
only letters, special symbols and numbers are
not allowed. When user enters any special
symbol or a number, user should immediately
get an alert message "special chars and
numbers are not allowed". The maximum length
of the name in each of these fields should not
exceed 25 chars. You can add a picture, char or
other content in the right column by clicking the
appropriate button.

7
Case Study – University Registration
Form (Contd.)
2. Address: Maximum number of chars allowed
should be 50 chars.
3. Email id: It should be of the format
something@something.something
4. City and State: State and cities are two
dropdown list boxes, when user selects the
state the city drop down should get updated as
respect to state.
5. Phone number: Should contain only numbers
and the maximum length is 11.

8
Case Study – University Registration
Form (Contd.)
6. Enrolled course: Should be 5 digit alpha numeric course
code, there should be a hyperlink, "click here to select the
course" which when clicked will open a window that
contains the course name and the corresponding course
code. When the user clicks on any course name, the
corresponding course code should get set in this field.
7. Marks obtained: This will accept only a number which is
not less than 50 and not more than 100. Highest
acceptable num is 100. If the user enters any other
number and clicks the submit button, there should be a
red colored text message displayed exactly after this field
with the following message.
"Enter a valid score between 50 & 100, if your score does
not fall in this range, you are not eligible for enrollment".

9
Case Study - University Registration
Form (Contd.)
8. Finally provide a submit button on the page.
When the button is clicked, there should be a
layer that pops up and contains the following
message.
"Thank you for submitting your information,
University Admission staff will get back to you
shortly"
9. The remaining page should get disabled and
only this layer should get highlighted.

10
Tasks
ƒ Design Application Form using HTML Tags.
ƒ Display current Date on the Form.
ƒ Provide a Clock on the Form.
ƒ Provide a Calender Component to select date
on the Form.
ƒ Using Message Boxes to convey information
while user fills in the form.
ƒ Write Event Handling functions for all form
Validations.

11
Q&A

ƒ Allow time for questions from participants

12
Source

ƒ W3Schools.com

Disclaimer: Parts of the content of this course is based on the materials available from the Web sites and
books listed above. The materials that can be accessed from linked sites are not maintained by
Cognizant Academy and we are not responsible for the contents thereof. All trademarks, service marks,
and trade names in this course are the marks of the respective owner(s).

13
You have completed the
Case Study for Hands-on
Session of JavaScript.

© 2007, Cognizant Technology Solutions. All Rights Reserved.

The information contained herein is subject to change without notice.