PIMPRI CHINCHWAD EDUCATION TRUST’S

S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3. ADVANCED JAVASCRIPT
Index:

Features of JavaScript, difference between client side scripting and

server side scripting.
Looping structures.
DOM Objects and window object in JavaScript.
Inbuilt objects such String, Math, Array, Date and Number with its
properties and Methods.
Simple JavaScript programs to do validations and user interaction.

From:
Mrs. Shilpa Prashant Kate (IT Teacher)
S.B.Patil college of Science & Commerce,Ravet
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

INTRODUCTION
 Program is a set of instructions used to produce various kinds of outputs
 JavaScript is an interpreted scripting language. An interpreted language is a type of
programming language that executes its instructions directly.
 JavaScript was initially created to "make webpages alive". The programs in this language are called
scripts.

 3.1.1 Features of JavaScript

 JavaScript is light weight scripting language because it does not support all features of object oriented
programming languages No need of special software to run JavaScript programs
 JavaScript is object oriented scripting language and it supports event based programming facility. It is case
sensitive language.
 JavaScript helps the browser to perform input validation without wasting the user's time by the
Web server access.
 It can handle date and time very effectively.
 Most of the JavaScript control statements syntax is same as syntax of control statements in other
programming languages.
 An important part of JavaScript is the ability to create new functions within scripts. Declare a function in
JavaScript using function keyword.
 Software that can run on any hardware platform (PC, Mac, SunSparc etc.) or software platform (Windows, Linux,
Mac OS etc.) is called as platform independent software. JavaScript is known as universal client side2
scripting language.
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3.1.2 DIFFERENCE BETWEEN SERVER SIDE SCRIPTING AND CLIENT SIDE SCRIPTING

Server Side scripting Client side scripting

 Server-side scripting is used at the backend,  client- side scripting is used at the frontend
where the source code is not visible or hidden at which users can see source code from the
browser.
the client side (browser). Server-side scripting is
more secure than client-side scripting
 client-side scripting does not need any server
 When a server-side script is processed it interaction.
communicates to the server.
 programming languages such as PHP, ASP.net, Ruby,  The client-side scripting language involves
ColdFusion, Python, C# etc. are server side languages such as HTML5, JavaScript etc.
scripting languages.
 Server-side scripting is useful in customizing  client- side scripts are generally used for
validation purpose and effectively
the web pages and implements the dynamic minimize the load to the server.
changes in the websites.
 Special software (web server software) is  client side scripts requires web browser as an
required to execute server-side script interface. 3
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3.2 Switch case and Looping Structures

3.2.1 Switch Case statement

• JavaScript has a built–in multiway decision statement known as Switch. The switch statement test the
value of given expression against a list of case values and when match is found, a block of
statement associated with that case is executed.
• There should not be duplicity between the cases.
• The value for the case must be similar data type as the variable in switch.
• The default statement is not mandatory.

Syntax :
switch(expression)
{
case value1:
statement block 1; break;
case value2:
statement block 2; break;
…………....
case value n:
statement block n; break;
default: 4
statement block ;
}
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3.1.2 DIFFERENCE BETWEEN SERVER SIDE SCRIPTING AND CLIENT SIDE

SCRIPTING

<!DOCTYPE html>
<head><title>Javascript Program
</title></head>
<body>
<h1> use of switch case </h1>
<script type="text/javascript"> var day=6;
switch(day)
{
case 1: alert(“Monday”); break;
case 2: alert(“Tuesday”); break;
case 3: alert(“Wednesday”); break;
case 4: alert(“Thursday”); break;
case 5: alert(“Friday”); break;
case 6: alert(“Saturday”); break;
case 7: alert(“Sunday”); break;
default: alert("Invalid day");
}
</script></body></html> 5
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3.2.2 LOOPING STATEMENT

• To execute some statement need to execute repeatedly. Iteration refers to
the execution of statement or a group of statements of code for a fixed number of
times or till the condition is satisfied.
• The condition should be Boolean condition.
• Some commonly used JavaScript looping statements are:
1)For loop
2)While loop

document.writeln(i)

6
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet
1. for…….loop
This loop executes statements as long as condition becomes true, for-loop is
that it combines initialization, condition and loop iteration (increment or decrement) in
single statement.

Syntax :
for(initialization;condition;iteration)
{
statement block;
}

Note : 'language' attribute of <Script> is replaced by 'type' attribute in all the programs as it is standardized.
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3.2.2 EXAMPLE OF FOR LOOP

<!DOCTYPE html> <!DOCTYPE html>

<head><title>Javascript for loop</title></head> <head><title>Javascript for loop</title></head>
<body><h1> use of for loop</h1> <body><h1> use of for loop</h1>
<script type="text/javascript"> <script type="text/javascript">
for(i=1;i<=5;i++) for(i=5;i>=1;i--)
{ {
document.writeln(i); document.writeln(i);
} }
</script> </script>
</body> </body>
</html> </html>

OUTPUT OUTPUT

8
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet
2. W HILE…..LOOP

THIS LOOP EXECUTES STATEMENTS AS LONG AS THE CONDITION IS TRUE. AS SOON AS

CONDITION BECOMES FALSE CONTROL COMES OUT OF THE LOOP.

Syntax:
initialization; while(condition)
{
statement block;
}

9
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3.1.3 EXAMPLE OF WHILE LOOP

<!DOCTYPE html> <!DOCTYPE html>

<head><title>Javascript while loop</title></head> <head><title>Javascript while loop</title></head>
<body><h1> use of while loop</h1> <body> <h1> use of while loop</h1>
<script type="text/javascript"> <script type="text/javascript">
var i=1 var i=5
while(i<=5) while(i>=1)
{ {
document.writeln(i); document.writeln(i);
i=i+1; i=i-1;
} }
</script></body> </html> </script> </body> </html>

OUTPUT OUTPUT

10
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

ACCEPT NUMBER AND DISPLAY THE TABLE OF THAT NUMBER

<!DOCTYPE html>
<head><title>Table-I</title>
<script type="text/javascript">
function display()
{
var i, a; a=form1.t1.value
for(i=1;i<=10;i++)
{
document.write(a*i + "<br/>");
}
}
</script></head> <body>
Enter number to display table:-
<form name="form1">
<input type="text" name="t1">
<input type="button" value="Display Table" onClick="display()"> 11
</body></html>
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

• Break and continue statements

• Break statement is used to jump out of loop. It is used to make an early exit
from a loop. When keyword break is encountered inside the loop,
control automatically passes to the next statement after the loop.

• Continue statement: In looping it may be necessary to skip

statement block and take the control at the beginning for next iteration. This
is done by using ‘continue’ statement in JavaScript.

12

Note : 'language' attribute of <Script> is replaced by 'type' attribute in all the programs as it is standardized.
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

Break and continue statements

<!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <body>
<body> <h2>JavaScript Loop with continue
<h2>JavaScript Loop with break statement</h2> statement</h2>
<script type=“text/javascript”> <script type=“text/javascript”>
var i; var i;
for (i = 0; i < 5; i++) { for (i = 0; i < 5; i++) {
if (i == 3) if (i ==3)
{ break; } { continue;}
document.write("<br>"+i); document.write("<br>"+i);
} }
</script> </script>
</body> OUTPUT OUTPUT
</body>
</html> </html>

13

Note : 'language' attribute of <Script> is replaced by 'type' attribute in all the programs as it is standardized.
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

NUMBER IS PRIME OR NOT

<!DOCTYPE html> <body>

<h1 align="center"> Program to check number is prime or not
<html><head><title>Prime number</title> </h1>
<script type="text/javascript"> function display() <form name="form1" style="text-align:center">
{ Enter your Number (Greater than one):-
<input type="text" name="t1"> <br>
var a,ans; <input type="button" value="check Prime number"
a=parseInt(form1.t1.value); ans=1; onClick="display()">
</body>
for(i=2;i<a; i++)
</html>
{
if(a%i==0)
{
ans=0; break;
}
}
if(ans==1)
alert("Number is prime"); else
alert("Number is not prime"); 14
}
</script></head>
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet
3.3 Objects in JavaScript
• JavaScript is an object based scripting language. Almost everything is an object in JavaScript.
• A JavaScript object is an entity having state (properties) and behavior (methods). An object
can group data together with functions needed to manipulate it.
• Examples of real world objects. as table, board, television, bicycle, shop, bus, car, monitor etc.
All these tangible things are known as objects.
•
Properties and methods of object's are accessed with '.' operator.
JavaScript supports 2 types of objects built-in objects and user defined objects.
1.Built in objects such as Math, String, Array, Date etc.
2.As per user requirements can create user defined objects
3.The ‘new’ keyword is used to create new object in JavaScript.
4. e.g. d= new Date();

• Take an example of car object.

• It has properties like name, model, weight, color
etc. and methods like start, stop, brake etc.
• All cars have same properties but contain different
values from car to car. 15
• All cars have same methods but perform differently.

Note : 'language' attribute of <Script> is replaced by 'type' attribute in all the programs as it is standardized.
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

DOM (Document Object Model) :



 When HTML document is loaded into a web browser, it becomes a

document
 The W3C Document Object Model (DOM) is a platform and
language- neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style of a
document."
 Following diagram shows hierarchy of DOM object:

16
PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

form1.name.value to get the value of the input value.

Instead of this,
document.getElementById() to get value of the input
text.
But we need to define id for the input field.

<!Doctype html>
<html>
<head>
<script type="text/javascript">
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
</head>
<body>
<form>
Enter No:<input type="text" id="number"
name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
</body>
</html>

17
output
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

The innerHTML Property : used to write the dynamic html on the html document.
The innerHTML property is useful for getting html element and changing its content.
The innerHTML property can be used to get or change any HTML element, including
<html> and <body>.
Before button click
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function changeText3() Output
{
var style="<h1 style= 'color:green'>";
var text="Welcome to the HTML5 and Javascript";
var closestyle="</h1>";
document.getElementById('para').innerHTML=style+text+closestyle;
}
</script></head>
<body style="background-color:cyan">
<h1 align="center">
<p id="para">Welcome to the site</p>
<input type="button" onclick="changeText3()" value="click this
button to change above text">
</h1>
</body>
</html> 18

After button click

 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

Window Object :
• At the very top of the object hierarchy is the window object. Window object is parent object of all other
objects. It represents an open window in a browser.
• An object of window is created automatically by the browser. Window object represents an open
window in a browser.
Following table shows some of the methods and properties for window object.

19
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

Program :
Before button click
<!DOCTYPE html>

<html> Output
<head> <title> Window Opener and Closer </title>

<script type="text/javascript">
function makeNewWindow()

var newwin=window.open();
newwin.document.write("<p>This is 'New Window'</p>");

newwin.document.body.style.backgroundColor = "skyblue";

</script></head>
<body>

<form>
<input type="button" value="Create New Window"
onClick="makeNewWindow()">

</form> </body>
20
</html>

After button click

 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

Program :
Before button click
<!DOCTYPE html>

<html> Output
<head>

<script type="text/javascript">
function sampleFunction()

window.setTimeout(next(), 4000);
}

function next()

alert("4 seconds have passed");

}

</script></head>
<body style="background -color:cyan">

<h1 align="center"> Click button and wait for message </h1>

<input type="button" value="Timeout function" 21
onClick="sampleFunction()">

</body> </html>
After button click
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3.4 JavaScript Event

Events are actions done by the user or an application that occurs on the webpage. In previous year we studied
different keyboard events (onKeypress, onKeydown, onkeyup) and mouse events (onClick, onMousemove,
onMouseout, onMouseover). Similarly there are some more events used with form objects.

22
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

3.5 JavaScript Built-in Objects

JavaScript has several built-in or core language objects. These built-in objects are available regardless
of window content and operates independently of whatever page browser has loaded. These objects
provide different properties and methods that are useful while creating live web pages.
String Object :
String is used to store zero or more characters of text within single or double quotes.
String object is used to store and manipulate text.

23
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

Example :
Example :
var str="Information Technology";
Find the position of the character h in the string txt.
document.write ("length of string is :-" + str.length);
var txt = "abcdefghijklm";
document.write ("Substring is :-" + str.substr (12,10)); var pos = txt. indexOf("h");
Document.write(“Character at 1st location is :”+str.charAt(1)); Output : pos= 8

Output : Example :
Length of string is :-22 var str = "Apple, Banana, Kiwi";
var res = str.substr(7);
Substring is :- Technology
Output: res= Banana, Kiwi
Character at 1st location is : n

Example :Convert the value of txt to upper case.

Example :
var str = "Hello planet earth, you are a great planet.";
var txt = "Hello World"; var n = str.lastIndexOf("planet");
var txt1 = txt.toUpperCase();
var txt2=txt.toLowerCase();
Output n= 36

Output: txt1 = HELLO WORLD

txt2= helloworld
24
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

<!DOCTYPE html>
<html><head><title>Pincode Validation</title></head>
<body style="color:blue;background-color:cyan">
<form name="form1">
<h1 align="center">
Enter Pincode value:-<input type="text" name="t1"><br><br>
<input type="button" value="Submit value" onClick="validate()">
</h1>
<script type="text/javascript"> function validate()
{
var pincode;
pincode=form1.t1.value;
if(pincode.length==0)
{
alert("please check, enter value"); form1.t1.focus();
}
else if(isNaN(pincode))
{
alert("please, enter integer number only"); form1.t1.focus();
}
else if(pincode.length<6||pincode.length>8)
{
alert("pincode length range between 6 to 8"); form1.t1.focus(); }
else
alert("Pincode is accepted"); 25
}
</script> </body></html>
 PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

Summary

JavaScript is light weight scripting language. It is platform independent language.

There are two types of scripts; client side script and server side scripts. Client side scripts
reside on client machine and server side script resides on web server.
JavaScript provide ‘switch…case’ as multi way decision statement.
For....loop, while…loop and do…while are commonly used looping structures in
JavaScript.
DOM (Document Object Model) is a programming interface for HTML and XML documents. It
defines logical structure of document.
Window object is parent object of all other objects hence its methods can be used without
specifying it.
JavaScript is event based language support objects events such as onBlur, onFocus,
onChange, onSelect, onSubmit, onLoad, onUnload, onResize etc.
JavaScript supports built-In objects such as Date, String, Math, Number and array etc. These
objects contain number of properties and methods that are useful while creating interacting
web pages.

26
PIMPRI CHINCHWAD EDUCATION TRUST’S
S.B.PATIL COLLEGE OF
Science and Commerce, Ravet

Thank you !

27