JavaScript

Targeted at: Entry Level Trainees

Session 04 Demo: Java Script Demo

© 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
JavaScript Session 04 Demo: Overview

ƒ Introduction:
This demo demonstrates about Java Scrip pre-defined
functions and objects, JavaScript events, and different
types of message boxes.

4
JavaScript Session 04 Demo: Objective

ƒ Objective:
After completing this session, you will be able to:
» Define Java Scrip pre-defined functions and objects
» Describe JavaScript events
» List different types of message boxes

5
Demo

Problem Statement:

Write a java script for pre-defined functions, objects,

events, and different type of message given in the demo
case study.

6
Demo (Contd.)
Code:
<label>Date of Birth:*</label>
<fieldset id='dateOfBirth'>
<input name="dobMonth" maxlength="2" size="2" value="MM"
onfocus="if(this.value=='MM')this.value='';" class="dom"
id="dobMonth" alt=" " type="text"
onBlur="validatemonth(dobMonth); validatedigit();"/>
<input name="dobDay" maxlength="2" size="2" value="DD"
onfocus="if(this.value=='DD')this.value='';" class=" dod"
id="dobDay" alt=" " type="text" onBlur=" validateday(dobDay);
validatedigit();"/>
<input name="tmpDobYear" maxlength="4" size="4" value="YYYY"
onfocus="if(this.value=='YYYY')this.value='';" class=" doy"
id="tmpDobYear" alt=" " type="text" onBlur="validateyear();
validatedigit();"/>
</fieldset><br>

Refer File Name: Code Dump_SEC_04_Demo.txt for soft copy of the code

7
Demo (Contd.)
function validateyear(){
var month=parseFloat(dobMonth.value);
if(month==2){
var limit=28;
if(tmpDobYear.value% 400==0 || (tmpDobYear % 100 !=0 &&
(tmpDobYear%4==0))){
limit=29;
}
if(dobDay.value>limit){
alert(“ Day cant exceed 29 for this month“);
}
else{
document.getElementById('seventhdiv').innerHTML=" ";
}
}
var cur_date = new Date();
var cur_month = cur_date.getMonth();
var cur_day = cur_date.getDate();
var cur_year =cur_date.getYear();

Refer File Name: Code Dump_SEC_04_Demo.txt for soft copy of the code

8
Demo (Contd.)

How it Works:
ƒ The validateyear() method in the HTML for
the Date field set calls the validateyear()
method in the validate.js file.
ƒ In that var
month=parseFloat(dobMonth.value); is a
pre-defined function which parses the month
value that we enter and trims any leading
white spaces and gives only the float value
that we entered.
9
Demo (Contd.)

ƒ Also var cur_date = new Date();returns the current

date, in which Date is a pre-defined class and cur_date
is object using which we can retrieve the current day,
month and year.
ƒ In the input tag of the HTML onBlur="validateyear();
“onBlur” is a event , which will take place when the
field loses the focus and at the same time
validateyear() method will be called.
ƒ In the java script alert(“ Day cant exceed 29 for this
month“); is a message or dialogue box which will be
popped up on the window when a day greater than 29 is
entered.

10
Q&A

ƒ Allow time for questions from participants

11
JavaScript Session 04 Demo:
Source
ƒ Cognizant Project List Maintenance System

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).

12
You have completed the
Session 04 Demo of
JavaScript.

© 2007, Cognizant Technology Solutions. All Rights Reserved.

The information contained herein is subject to change without notice.