BCA - IInd Yr

Internet Programming

Unit - V
Client Side Scripting

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 A client-side script is a program that is processed within the client browser. These kinds of scripts are
small programs which are downloaded, compiled and run by the browser. JavaScript is an important clientside
scripting language and widely used in dynamic websites. The script can be embedded within the HTML or
stored in an external file.

Client-side scripts can often be looked at if the user chooses to view the source code of the page. JavaScript
code is widely copied and recycled.

What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used by several websites for
scripting the WebPages. It is an interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for adding
programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted by all other
graphical web browsers. With JavaScript, users can build modern web applications to interact directly without
reloading the page every time.

Features of JavaScript

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using classes
for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

JavaScript Comment
The JavaScript comments are meaningful way to deliver message. It is used to add information about the
code, warnings or suggestions so that end user can easily interpret the code.

The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser.
There are two types of comments in JavaScript.

1. Single-line Comment
2. Multi-line Comment
Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College
 JavaScript Single line Comment

It is represented by double forward slashes (//). It can be used before and after the statement.

Example:

<script> var a=10; var b=20; var c=a+b; //It

adds values of a and b variable document.write(c);
//prints sum of 10 and 20 </script>

JavaScript Multi line Comment

It can be used to add single as well as multi line comments. So, it is more convenient. It is represented by
forward slash with asterisk(/*) then asterisk with forward slash(*/).

Example:

<script>
/* It is multi line comment. It will not be displayed */
document.write("example of javascript multiline comment");
</script>

Variables
Variables are containers for storing data (values). Variables are declared with the var keyword. Storing a value
in a variable is called variable initialization. Variable initialization can be done at the time of variable creation
or at a later point in time when variable needed.
<script type = "text/javascript">
<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>

JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type.
Rules

The general rules for constructing names for variables (unique identifiers) are:

• Names can contain letters, digits, underscores, and dollar signs.

• Names must begin with a letter
• Names can also begin with $ and _
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 JavaScript Variable Scope
The scope of a variable is the region of program in which it is defined. JavaScript variables have only two
scopes.
• Global Variables − A global variable has global scope which means it can be defined anywhere in
JavaScript code. • Local Variables − A local variable will be visible only within a function where it is
defined. Function parameters are always local to that function.

Example

<script>
function abc( ){ var x=10;
//local variable
}
</script>

<script> var data=200; //gloabal

variable function a( ){
document.writeln(data);
}
a( ); //calling JavaScript function
</script>

JavaScript Datatypes
One of the most fundamental characteristics of a programming language is the set of data types it supports.
These are the type of values that can be represented and manipulated in a programming language.

JavaScript provides different data types to hold different types of values. There are two types of data types
in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type
JavaScript primitive data types

There are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 Boolean represents boolean value either false or true

Undefined represents undefined value

Null represents null i.e. no value at all

JavaScript non-primitive data types

The non-primitive data types are as follows:

Data Type Description

Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expres

Conditions Statements
JavaScript supports conditional statements which are used to perform different actions based on different
conditions.

JavaScript If statement

It evaluates the content only if expression is true. The syntax of JavaScript if statement is given below:

if(expression){
//content to be evaluated
}
Example:
<html>
<body>
<script type = "text/javascript">
<!--
var age = 20;

if( age > 18 ) {

document.write("<b>Qualifies for driving</b>");
}
//-->

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 </script>
<p>Set the variable to different value and then try...</p>
</body>
</html>

JavaScript If...else Statement

It evaluates the content whether condition is true or false. The syntax of JavaScript if-else statement is given
below:

if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false }
Example:
<script> var a=20; if(a%2==0){
document.write("even number");
} else{ document.write("odd
number");
}
</script>

JavaScript If...else if statement

It evaluates the content only if expression is true from several expressions. The syntax of JavaScript if else if
statement is given below:

if(expression1){
//content to be evaluated if expression1 is true
} else
if(expression2){
//content to be evaluated if expression2 is true
} else
if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}
Example:

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 <script> var a=20; if(a==10){
document.write("a is equal to 10");
} else if(a==15){ document.write("a is
equal to 15");
} else if(a==20){ document.write("a is
equal to 20");
} else{ document.write("a is not equal to 10, 15 or
20");
}
</script>

JavaScript Switch

The JavaScript switch statement is used to execute one code from multiple expressions. It is just like else if
statement. The interpreter checks each case against the value of the expression until a match is found. If
nothing matches, a default condition will be used.

Syntax:

switch (expression) {
case condition 1: statement(s)
break;

case condition 2: statement(s)

break;
...

case condition n: statement(s)

break;

default: statement(s)
}
Example:

<script> var
grade='B'; var
result;
switch(grade)
{
case 'A':
result="A Grade";
break;
case 'B':
Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College
 result="B Grade";
break;
case 'C':
result="C
Grade"; break; default:
result="No Grade";
}
document.write(result);
</script>

JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while or do while loops. It makes the
code compact. It is mostly used in array.

There are following types of loops in JavaScript:

1. for loop
2. while loop
3. do-while loop
The while Loop
The most basic loop in JavaScript is the while loop. The purpose of a while loop is to execute a statement or
code block repeatedly as long as an expression is true. Once the expression becomes false, the loop terminates.

The syntax of while loop is given below:

while (condition)
{
code to be executed
}

Example

<html>
<body>

<script type = "text/javascript">

<!--
var count = 0;
document.write("Starting Loop ");

while (count < 10)

{
Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College
 document.write("Current Count : " + count + "<br />");
count++;
}

document.write("Loop stopped!");
//-->
</script>

</body>
</html>

The for Loop

The 'for' loop is the most compact form of looping. It includes the following three important parts −
• The loop initialization where we initialize our counter to a starting value. The initialization
statement is executed before the loop begins.
• The test statement which will test if a given condition is true or not. If the condition is true, then the
code given inside the loop will be executed, otherwise the control will come out of the loop.
• The iteration statement where we can increase or decrease counter.
All the three parts can be used in a single line separated by semicolons.
Syntax:

for (initialization; condition; increment)

{
code to be executed
}
Example:

<script> for (i=1; i<=5;

i++)
{ document.write(i + "<br/>")
}
</script>

The do while Loop

The do...while loop is similar to the while loop except that the condition check happens at the end of the
loop. This means that the loop will always be executed at least once, even if the condition is false.

Syntax:

do
{
code to be executed

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 } while(condition);

Example:

<script> var
i=21;
do{
document.write(i + "<br/>"); i++;
}while (i<=25);
</script>

JavaScript Popup Boxes

JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box.

Alert Box
An alert dialog box is mostly used to give a warning message to the users. Alert box gives only one button
"OK" to select and proceed.
Syntax
alert(“Message to display”);

Example

<script type="text/javascript"> function

msg( )
{
alert("Hello Alert Box");
}
</script>

<input type="button" value="click" onclick="msg( )"/>

Confirmation Box
A confirmation box is mostly used to take user's consent on any option. It displays a dialog box with two
buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm( ) will return true. If the user clicks on the
Cancel button, then confirm( ) returns false. Syntax

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 <variable> = confirm(“Message to display”);

Example
<script type="text/javascript"> function
msg( ){ var v= confirm("Are u
sure?"); if(v==true){
alert("ok");
}
else{
alert("cancel");
}

}
</script>
<input type="button" value="delete record" onclick="msg( )"/>

Prompt Box
The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables
you to interact with the user. The user needs to fill in the field and then click OK.
This dialog box is displayed using a method called prompt( ) which takes two parameters:
(i) a label which you want to display in the text box and (ii) a
default string to display in the text box.
This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method
prompt( ) will return the entered value from the text box. If the user clicks the Cancel button, the window
method prompt( ) returns null. Syntax
<variable> = confirm(“Message to display”, “Default Text”);

Example
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>

<body>
<p>Click the following button to see the result: </p>
<form>

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 <input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body> </html>

JavaScript - Events
The change in the state of an object is known as an Event. JavaScript's interaction with HTML is handled
through events that occur when the user or the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other
examples include events like pressing any key, closing a window, resizing a window, etc.

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of
events which can trigger JavaScript Code.

When JavaScript code is included in HTML, JavaScript react over these events and allow the execution. This
process of reacting over the events is called Event Handling. Thus, JavaScript handles the HTML events via
Event Handlers.

Some of the HTML events and their event handlers are:

Mouse Events:

Event Performed Event Handler Description

Click onclick When mouse click on an element

Mouseover onmouseover When the cursor of the mouse comes over the
element

Mouseout onmouseout When the cursor of the mouse leaves an element

Mousedown onmousedown When the mouse button is pressed over the element

Mouseup onmouseup When the mouse button is released over the element

Mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 Event Performed Event Handler Description

Keydown & Keyup onkeydown & When the user press and then release the key
onkeyup

Form events:

Event Performed Event Handler Description

Focus onfocus When the user focuses on an element

Submit onsubmit When the user submits the form

Blur onblur When the focus is away from a form element

Change onchange When the user modifies or changes the value of a

form element

Window/Document events

Event Performed Event Handler Description

Load onload When the browser finishes the loading of the page

Unload onunload When the visitor leaves the current webpage, the
browser unloads it

Resize onresize When the visitor resizes the window of the browser

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.

There are 3 ways to construct array in JavaScript

1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)

1) JavaScript array literal

The syntax of creating array using array literal is given below:

var arrayname=[value1,value2.....valueN];

Example

<script> var emp=["Sonoo","Vimal","Ratan"];

for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script> 2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

var arrayname=new Array( );

Here, new keyword is used to create instance of array.

Example <script>
var i;
var emp = new Array( ); emp[0]
= "Arun";
emp[1] = "Varun"; emp[2] = "John";

for (i=0;i<emp.length;i++){ document.write(emp[i]

+ "<br>");
}
</script>

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that we don't have
to provide value explicitly.

Example

<script> var emp=new

Array("Jai","Vijay","Smith"); for
(i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>

Array Properties
Here is a list of the properties of the Array object along with their description.
Sr.No. Property & Description

1
index
The property represents the zero-based index of the match in the string

2 length

Reflects the number of elements in an array.

Array Methods
Here is a list of the methods of the Array object along with their description.
Sr.No. Method & Description

1
concat( )

Returns a new array comprised of this array joined with other array(s) and/or value(s).

2 every( )

Returns true if every element in this array satisfies the provided testing function.

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 5 indexOf( )

Returns the first (least) index of an element within the array equal to the specified value, or -1 if
none is found.

6 join( )

Joins all elements of an array into a string.

7 lastIndexOf( )

Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if
none is found.

9 pop( )

Removes the last element from an array and returns that element.

10 push( )

Adds one or more elements to the end of an array and returns the new length of the array.

13 reverse( )

Reverses the order of the elements of an array -- the first becomes the last, and the last becomes
the first.

14 shift( )

Removes the first element from an array and returns that element.

18 sort( )

Sorts the elements of an array

JavaScript Objects
JavaScript is an Object Oriented Programming (OOP) language. Everything is an object in JavaScript. A
javaScript object is an entity having state and behavior (properties and method). For example: car, pen, bike,
chair, glass, keyboard, monitor etc.

Creating Objects in JavaScript

There are following ways to create objects.

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College

 1. By object literal
2. By creating instance of Object directly (using new keyword)

1) JavaScript Object by object literal

The syntax of creating object using object literal is given below:

object={property1:value1, property2:value2.....propertyN:valueN}

property and value is separated by : (colon).

Example

<script> emp={id:102, name:"Shyam Kumar", salary:40000}

document.write(emp.id+" "+emp.name+"
"+emp.salary);
</script>

2) By creating instance of Object

The syntax of creating object directly is given below:

var objectname = new Object( );

Here, new keyword is used to create object.

Example

<script> var emp = new Object( ); emp.id = 101; emp.name

= "Ravi Malik"; emp.salary = 50000;
document.write(emp.id+" "+emp.name+"
"+emp.salary);
</script>

Aman Choudhary Student (BCA – II 2023) Seth G. L. Bihani S. D. PG College