Scribd
Upload
37 views

Javascript: Targeted At: Entry Level Trainees

This document provides an introduction and demo of JavaScript. It discusses including JavaScript in HTML, basics and user defined functions, and demonstrates validating a credit card registration form. The demo shows how to write JavaScript code to validate required fields on a registration form.

Uploaded by

SettiNagaraju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

Javascript: Targeted At: Entry Level Trainees

This document provides an introduction and demo of JavaScript. It discusses including JavaScript in HTML, basics and user defined functions, and demonstrates validating a credit card registration form. The demo shows how to write JavaScript code to validate required fields on a registration form.

Uploaded by

SettiNagaraju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

JavaScript

Targeted at: Entry Level Trainees

Session 02 Demo: Introduction to JavaScript

© 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 02 Demo: Overview

ƒ Introduction:
This demo demonstrates the different ways to include
JavaScript code in HTML.

It also demonstrates Basics and User defined function


in JavaScript.

4
JavaScript Session 02 Demo: Objective

ƒ Objective:
After completing this session, you will be able to:
» List different ways to include JavaScript code in HTML
» Define Basics and User defined functions in JavaScript

5
Demo

Problem Statement:

Write a Java Script for the Online Credit Card


Registration given in the Presentation Case Study.

6
Demo (Contd.)
Code:
<HTML>
<HEAD><TITLE>Credit Card Registration Form</TITLE>
<link rel="stylesheet" href="apply.css" type="text/css" media="screen“
charset="utf-8">
<script type="text/javascript" charset="utf-8" src="validate.js"
></script>
</HEAD>
<BODY>
<form action="Success.html" onsubmit=" return validate();" method="post">
<center><h2>Online Credit Card Application Form</h2></center>
<h4>* Represents Mandatory Fields</h4>
<div class='maindiv'>
<div class='leftdiv'>
<label>First Name:*</label><input type=text maxlength='15' size='15'
id='fname' tabindex="1" alt=" " class="iClass"/><br><br>
<div>
<input type="submit" value="Submit" >
</div>
</form></BODY></HTML>

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

7
Demo (Contd.)
Java script: ”validate.js”

function validate(){
var fname = document.getElementById(“fname”);
var mname= document.getElementById(“mname”);
var lname= document.getElementById(“lname”);

if(fname.value.length==0||mname.value.length==0||lname.va
lue.length==0){
alert(“Mandatory fields should not be empty“);
return false;
}

else{
document.getElementById(‘firstdiv’).innerHTML=‘’
‘’;
}
}

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

8
Demo (Contd.)

How it Works:
ƒ As the HTML page is loaded, it starts loading
from the head section.
ƒ So, the CSS and .js files in the will be loaded
first.
ƒ Then the body loads and all the HTML
elements in it will be loaded.
ƒ Once the submit button is clicked ,the
validate() function in the form will be called.
ƒ This calls the validate() function in the
validate.js file.

9
Demo (Contd.)

ƒ The function checks whether the mandatory


fields are filled or not and if not an alert box is
popped up saying “Mandatory fields should not
be empty”.
ƒ Field is filled or not can be checked by using
the keyword “length” for the firstname field id
“fname”( in the code).
ƒ Statement for that is “fname.value.length”
ƒ The value entered in the field can be known by
using the statement
“document.getElementByID()” function.

10
Q&A

ƒ Allow time for questions from participants

11
JavaScript Session 02 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 02 Demo of
JavaScript.

© 2007, Cognizant Technology Solutions. All Rights Reserved.


The information contained herein is subject to change without notice.

You might also like