A Laboratory Manual for

Client Side Scripting

Language
(22519)
Semester –V
(IF)

Maharashtra State Board of Technical Education, Mumbai.

 Maharashtra State
Board of Technical Education

Certificate

This is to certify that Mr./Ms.

……………………………………………………………………………… Roll No of Third

Semester of Diploma in Computer Technology of

Institute,………………………………………………………………………………………………

……………… (Code..... ) has completed the term work satisfactorily in course

Client Side Scripting languages (22519) for the academic year .............. to

… .................. as Prescribed in the curriculum.

Place: ………………………………… Enrollment No: ………………………………..

Date: …………………………………. Exam. Seat No: …………………………………

Subject Teacher Head of Department Principal

Seal of Institution
Client Side Scripting Languages (22519)

Program Outcomes (POs) to be achieved through Practical of this Course:-

PO 1.Basic knowledge: Apply knowledge of basic mathematics, sciences and basic
engineering to solve the broad-based Computer engineering problem.

PO 2.Discipline knowledge: Apply Computer engineering discipline - specific knowledge

to solve core computer engineering related problems.

PO 3.Experiments and practice: Plan to perform experiments and practices to use the
results to solve broad-based Computer engineering problems.

PO 4.Engineering tools: Apply relevant Computer technologies and tools with an

understanding of the limitations.

PO 5.The engineer and society: Assess societal, health, safety, legal and cultural issues and the
consequent responsibilities relevant to practice in field of Computer engineering.

PO 6.Environment and sustainability: Apply Computer engineering solutions also for

sustainable development practices in societal and environmental contexts and demonstrate
the knowledge and need for sustainable development.

PO 7. Ethics: Apply ethical principles for commitment to professional ethics, responsibilities

and norms of the practice also in the field of Computer engineering.

PO 8.Individual and team work: Function effectively as a leader and team member in
diverse/ multidisciplinary teams.

PO 9.Communication: Communicate effectively in oral and written form.

PO 10.Life-long learning: Engage in independent and life-long learning activities in the

context of technological changes in the Computer engineering field and allied industry.

Maharashtra State board of Education

Client Side Scripting Languages (22519)

Content Page

List of Practical’s and Progressive assessment Sheet

Dated
Date of Date of Assessment
Sr.No Title of practical sign of Remarks
performance submission marks(25)
Teacher
Write simple JavaScript with HTML for
1 arithmetic expression evaluation and
message printing.
Develop JavaScript to use decision
2
making and looping statements
Develop JavaScript to implements
3
Array functionalities
Develop javascript to implement
4
functions
Develop javascript to implement
5
Strings.
Create web page using Form Elements
6
Create web page to implement Form
7
Events .Part I
Create web page to implement Form
8
Events .Part II
Develop a webpage using intrinsic
9
java functions
Develop a webpage for creating
session and persistent cookies.
10
Observe the effects with browser
cookies settings.
Develop a webpage for placing the
11 window on the screen and working
with child window.
Develop a web page for validation of
12
form fields using regular expressions.
Create web page with Rollovers
13
effect.
Develop a webpage for implementing
14
Menus.
Develop a webpage for implementing
15
Status bars and web page protection.
Develop a web page for implementing
16
slideshow, banner.

Total

Maharashtra State board of Education

Client Side Scripting Languages (22519)

Practical No 1: Write simple JavaScript with HTML for

arithmetic expression evaluation and message printing.
What is JavaScript?

– It is designed to add interactivity to HTML pages

– It is a scripting language (a lightweight programming language)

– It is an interpreted language (it executes without preliminary compilation)

– Usually embedded directly into HTML pages

– And, Java and JavaScript are different

What can a JavaScript Do?

– JavaScript gives HTML designers a programming tool:

o simple syntax

– JavaScript can put dynamic text into an HTML page

– JavaScript can react to events

– JavaScript can read and write HTML elements

– JavaScript can be used to validate data

– JavaScript can be used to detect the visitor’s browser

– JavaScript can be used to create cookies

o Store and retrieve information on the visitor’s computer

JavaScript How To

– The HTML <script> tag is used to insert a JavaScript into an HTML page

<script type=“text/javascript”>

document. write(“Hello World!”)

</script>

– Ending statements with a semicolon?

o Optional; required when you want to put multiple statements on a single line

JavaScript can be inserted within the head, the body, or use external JavaScript file

Maharashtra State board of Education

Client Side Scripting Languages (22519)
How to handle older browsers?

<script type=“text/javascript”>

<!—

document.write(“Hello World!”)

// -->

</script>

JavaScript can "display" data in different ways:

 Writing into an HTML element, using innerHTML.

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content.

 Writing into the HTML output using document.write().

 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().

JavaScript Variables
 In a programming language, variables are used to store data values.
 JavaScript uses the var keyword to declare variables.
 An equal sign is used to assign values to variables.

JavaScript Arithmetic Operators

 Arithmetic operators are used to perform arithmetic on numbers:
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement

Maharashtra State board of Education

Client Side Scripting Languages (22519)
Programs: -
1.(A) Simple JavaScript Program

<!DOCTYPE html>
<html>
<head>
<title> Alert</title>
</head>
<body>
<script language="JavaScript">
document.write("Hello World!");
alert("Hello World!");
</script>
</body>
</html>

 Output: - 1(A)

Client Side Scripting Languages (22519)

Client Side Scripting Languages (22519)

1.(B) Perform Multiplication of Two Numbers

<!DOCTYPE html>
<html>
<head>
<title> Multiplication of Two Numbers</title>
</head>
<body>
<script type="text/Javascript">
var ans = 0;
var firstnum = 0;
var secondnum = 0;
firstnum = prompt("Enter the first number",0);
secondnum = prompt("Enter the second number",0);
ans = firstnum * secondnum;
document.write(ans);
</script>
</body>
</html>

Maharashtra State board of Education

Client Side Scripting Languages (22519)

 Output: -1(B)

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)

Maharashtra State board of Education

Client Side Scripting Languages (22519)

Practical No2:-Develop JavaScript to use decision making

and looping statements
Conditional Statements:
1. The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Syntax
if (condition) {

// block of code to be executed if the condition is true

2. The else Statement

Use the else statement to specify a block of code to be executed if the condition is false.

Syntax
if (condition) {
// block of code to be executed if the condition is true

} else {
// block of code to be executed if the condition is false

3. The else if Statement

Use the else if statement to specify a new condition if the first condition is false.

Syntax
if (condition1) {
// block of code to be executed if condition1 is true

} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true

} else {
Maharashtra State board of Education
Client Side Scripting Languages (22519)
// block of code to be executed if the condition1 is false and condition2 is false

4. TheSwitch Statement
Use the switch statement to select one of many code blocks to be executed.

Syntax
switch(expression)
{ case x:

// code block

break;

case y:
// code block
break; default:

// code block

JavaScript Loops
1.for loop
Loops are handy, if you want to run the same code over and over again, each time with a different
value.

Syntax:-
for (initialization condition; testing condition; increment/decrement)
{

statement(s)
}

Or for objects
for (variableName in Object)
{

statement(s)
}

Maharashtra State board of Education

Client Side Scripting Languages (22519)
2.do while:
do while loop is similar to while loop with only difference that it checks for condition after executing
the statements, and therefore is an example of Exit Control Loop.

Syntax:
do
{

statements..
}while (condition);

3.While loop
A while loop is a control flow statement that allows code to be executed repeatedly based on
a given Boolean condition. The while loop can be thought of as a repeating if statement.

Syntax :
while (boolean condition)
{

loop statements...
}

Maharashtra State board of Education

Client Side Scripting Languages (22519)
Programs: -
2.(A) For Loop
<!DOCTYPE html>
<html>
<head><title>For Loop Program</title></head>
<body>
<script type = "text/javascript">
var i;
for(i = 0; i<10;i++)
{
document.write("Value of i:"+ i + "<br>");
}
</script>
</body>
</html>

 Output: - 2(A)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
2.(B) For in Loop
<!DOCTYPE html>
<html>
<head><title>For in Loop Program</title>
</head>
<body>
<script type = "text/javascript">
var languages = { first : "C++", second : "Java", third : "JavaScript"};
for(lang in languages)
{
document.write(languages[lang] + "<br>");
}
</script>
</body>
</html>

 Output: - 2(B)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
2.(C) Do While Loop
<!DOCTYPE html>
<html>
<head><title>Do While Loop Program</title></head>
<body>
<script type = "text/javascript">
var x = 21;
do
{
document.write("Value of x:"+ x + "<br>");
x++;
} while(x < 20);
</script>
</body>
</html>

 Output: - 2(C)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
2.(D) While Loop
<!DOCTYPE html>
<html>
<head><title>While Loop Program</title></head>
<body>
<script type = "text/javascript">
var x = 1;
while(x <= 4)
{
document.write("Value of x:"+ x + "<br />");
x++;
}
</script>
</body>
</html>

 Output: - 2(D)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
2.(E) If Else
<!DOCTYPE html>
<html>
<head><title>If Else Program</title>
</head>
<body>
<script type="text/javascript">
var i = 10;
if (i < 15)
document.write("10 is less than 15");
else
document.write("10 is greater than 15");
</script>
</body>
</html>

 Output: - 2(E)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
2.(F) Switch Case
<!DOCTYPE html>
<html>
<head><title>Switch Case Program</title></head>
<body>
<script type = "text/javascript">
var i = 9;
switch(i)
{
case 0:
document.write("i is zero.");
break;
case 1:
document.write("i is one.");
break;
case 2:
document.write("i is two.");
break;
default:
document.write("i is greater than 2.");
}
</script>
</body>
</html>

Maharashtra State board of Education

Client Side Scripting Languages (22519)

 Output: - 2(F)

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)

Maharashtra State board of Education

Client Side Scripting Languages (22519)

Practical No-3.Develop JavaScript to implements

Array functionalities
What is an Array?
An array is a special variable, which can hold more than
one value at a time.

Creating an Array

Using an array literal is the easiest way to create a

JavaScript Array.

Syntax:
var array_name = [item1, item2, ...];

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.

Maharashtra State board of Education

Client Side Scripting Languages (22519)
Eg :-1
<html>
<body>
<script>
var i;
varemp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";

for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>

2.
<html>
<body>
<script>
varemp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}

Maharashtra State board of Education

Client Side Scripting Languages (22519)
</script>
</body>
</html>

JavaScript Array Methods

find() It returns the value of the first element in the given array that satisfies the
specified condition.
findIndex() It returns the index value of the first element in the given array that
satisfies the specified condition.
indexOf() It searches the specified element in the given array and returns the index of
the first match.
lastIndexOf() It searches the specified element in the given array and returns the index
of the last match.
pop() It removes and returns the last element of an
array. push() It adds one or more elements to the end of an
array. reverse() It reverses the elements of given array.
shift() It removes and returns the first element of an array.
sort() It returns the element of the given array in a sorted order.

Maharashtra State board of Education

Client Side Scripting Languages (22519)
3.(A) Assigning Elements to Array by Index
<!DOCTYPE html>
<html>
<head><title>Assigning elements to array by index</title></head>
<body>
<script type = "text/javascript">
arr = new Array(5);
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;
arr[4] = 50;
for (i=0;i<5;i++)
document.write("Value at " + i + ": " + arr[i] + "<br>");
</script>
</body>
</html>

 Output: - 3(A)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
3.(B) Push Element to Array
<!DOCTYPE html>
<html>
<head><title>Pushing elements to array</title></head>
<body>
<script type = "text/javascript">
arr = new Array(10,20,30,40);
document.write("<h4>Elements in array</h4>");
for (elm in arr)
document.write(arr[elm] + "<br>");
arr.push(50);
document.write("<h4>Elements in array after pushing 50</h4>");
for (elm in arr)
document.write(arr[elm] + "<br>");
</script>
</body>
</html>

 Output: - 3(B)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
3.(C)Pop Elements from Array
<!DOCTYPE html>
<html>
<head><title>Popping elements from array</title></head>
<body>
<script type = "text/javascript">
arr = new Array(10,20,30,40);
document.write("<h4>Elements in array</h4>");
for (elm in arr)
document.write(arr[elm] + "<br>");
var popElm = arr.pop();
document.write("<h4>Elements in array after popping " + popElm + " </h4>");
for (elm in arr)
document.write(arr[elm] + "<br>");
</script>
</body>
</html>

 Output: - 3(C)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
3.(D) Program to Reverse an Array
<!DOCTYPE html>
<html>
<head><title>Reversing elements from array</title></head>
<body>
<script type = "text/javascript">
arr = new Array(10,20,30,40);
document.write("<h4>Elements in array</h4>");
for (elm in arr)
document.write(arr[elm] + "<br>");
arr.reverse();
document.write("<h4>Elements in array after reversing it </h4>");
for (elm in arr)
document.write(arr[elm] + "<br>");
</script>
</body>
</html>

 Output: - 3(D)

Maharashtra State board of Education

Client Side Scripting Languages (22519)
3.(E) Program to use Shift on an Array
<!DOCTYPE html>
<html>
<head><title>Array shift function</title></head>
<body>
<script type = "text/javascript">
arr = new Array(10,20,30,40);
document.write("<h4>Elements in array</h4>");
for (elm in arr)
document.write(arr[elm] + "<br>");
var x = arr.shift();
document.write("<h4>Removed element " + x + " from the array using
shift</h4>");
document.write("<h4>Elements in array after using shift</h4>");
for (elm in arr)
document.write(arr[elm] + "<br>");
</script>
</body>
</html>

 Output: - 3(E)

Maharashtra State board of Education

Client Side Scripting Languages (22519)

Maharashtra State board of Education