A Laboratory Manual for

Client Side Scripting

Language
(22519)
Semester –V
(CM)

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 Prepared By-Miss.P.S.Dungarwal

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 Prepared By-Miss.P.S.Dungarwal

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 Prepared By-Miss.P.S.Dungarwal

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

1.Simple Java Script Program

<html>

<script language="JavaScript">

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

document. write("Hello World!");

alert("Hello World!");

</script>

</html>

2.Perform Multiplication of Two Numbers

<html>

<script language="JavaScript">

varans = 0;

varfirstnum = 0;

varsecondnum = 0;

firstnum = prompt("Enter the first number",0);

secondnum = prompt("Enter the second number",0);

ans = firstnum * secondnum;

document.write(ans);

</script>

</html>

Questions:

1. Which company developed JavaScript?

2. What are JavaScript Data Types?
3. How to declare variable in Javascript?
4. What are arithmetical operators?

Marks Obtained Dated Signed of

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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 {
// 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;

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

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

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

Programs:
1.for loop

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

<script type = "text/javascript">

// JavaScript program to illustrate for loop
varx;

// for loop begins when x=2

// and runs till x <=4
for(x = 2; x <= 4; x++)
{
document.write("Value of x:"+ x + "<br />");
}

< /script>

2.for..in loop

<script type = "text/javaScript">

// JavaScript program to illustrate for..in loop

// creating an Object
varlanguages = { first : "C", second : "Java",
third : "Python", fourth : "PHP",
fifth : "JavaScript"};

// iterate through every property of the

// object languages and print all of them
// using for..in loops
for(itr inlanguages)
{
document.write(languages[itr] + "<br>");
}

< /script>

3.do ..while loop

<script type = "text/javaScript">

// JavaScript program to illustrate do-while loop

varx = 21;

do
{
// The line while be printer even
// if the condition is false
document.write("Value of x:"+ x + "<br />");

x++;
} while(x < 20);

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

< /script>

4.while loop

<script type = "text/javaScript">

// JavaScript program to illustrate while loop

varx = 1;

// Exit when x becomes greater than 4

while(x <= 4)
{
document.write("Value of x:"+ x + "<br />");

// increment the value of x for

// next iteration
x++;
}

< /script>

5.if…else

<script type = "text/javaScript">

// JavaScript program to illustrate If-else statement

vari = 10;

if(i < 15)

document.write("10 is less than 15");
else
document.write("I am Not in if");

< /script>

6.switch case

<script type = "text/javascript">

// JavaScript program to illustrate switch-case

vari = 9;

switch(i)
{
case0:

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

document.write("i is zero.");
break;
case1:
document.write("i is one.");
break;
case2:
document.write("i is two.");
break;
default:
document.write("i is greater than 2.");
}
</script>

Questions
1. Is JavaScript case sensitive? Give an example?

2.What Boolean operators can be used in JavaScript?

Marks Obtained Dated Signed of

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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.

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 Prepared By-Miss.P.S.Dungarwal

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.

Questions:

1. What is array?
2. How to defined array?

Marks Obtained Dated Signed of

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

Practical No-4.Develop javascript to implement functions

Function

JavaScript functions are used to perform operations. We can call JavaScript function many times to
reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.
1. Code reusability: We can call a function several times so it save coding.
2. Less coding: It makes our program compact. We don’t need to write many lines of code each
time to perform a common task.

JavaScript Function Syntax

function function_Name([arg1, arg2, ...argN])
{
//code to be executed
}
JavaScript Functions can have 0 or more arguments.

Example
<html>
<body>
<script>
functionmsg()
{
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
</body>
</html>

JavaScript Function Arguments

We can call function by passing arguments. Let’s see the example of function that has one argument.
<html>
<body>
<script>
functiongetcube(number)
{
alert(number*number*number);
}

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
</body>
</html>

Function with Return Value

We can call function that returns a value and use it in our program. Let’s see the example of function
that returns value.
<html>
<body>
<script>
functiongetInfo(){
return"hello javatpoint! How r u?"; }
</script>
<script>
document.write(getInfo());
</script>
</body>
</html>

JavaScript Function Object

In JavaScript, the purpose of Function constructor is to create a new Function object. It executes the
code globally. However, if we call the constructor directly, a function is created dynamically but in an
unsecured way.
Syntax
new Function ([arg1[, arg2[, ....argn]],] functionBody)
Parameter-arg1, arg2, .... , argn - It represents the argument used by function.
functionBody - It represents the function definition.
<!DOCTYPE html>
<html>
<body>
<script>
var add=new Function("num1","num2","return num1+num2");
document.writeln(add(2,5));
</script> Marks Obtained Dated Signed of
teacher
</body> Process Product Total(50)
</html> Related(35) Related(15)

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

Practical No-5.Develop javascript to implement Strings.

JavaScript String
The JavaScript string is an object that represents a sequence of characters.
There are 2 ways to create string in JavaScript
1. By string literal
2. By string object (using new keyword)

1) By string literal
The string literal is created using double quotes. The syntax of creating string using string literal is given
below:
var stringname="string value";

Example:
<!DOCTYPE html>
<html>
<body>
<script>
varstr="This is string literal";
document.write(str);
</script>
</body>
</html>

2) By string object (using new keyword)

The syntax of creating string object using new keyword is given below:
var stringname=new String("string literal");
Here, new keyword is used to create instance of string.

Example
<!DOCTYPE html>
<html>
<body>
<script>
varstringname=new String("hello javascript string");
document.write(stringname);
</script>
</body>
</html>

JavaScript String Methods

charAt() It provides the char value present at the specified index.

charCodeAt() It provides the Unicode value of a character present at the specified index.
concat() It provides a combination of two or more strings.
indexOf() It provides the position of a char value present in the given string.

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

lastIndexOf() It provides the position of a char value present in the given string by searching a
character from the last position.
search() It searches a specified regular expression in a given string and returns its position if a
match occurs.
match() It searches a specified regular expression in a given string and returns that regular
expression if a match occurs.
replace() It replaces a given string with the specified replacement.
substr() It is used to fetch the part of the given string on the basis of the specified starting
position and length.
substring() It is used to fetch the part of the given string on the basis of the specified index.
toLowerCase() It converts the given string into lowercase letter.
toUpperCase() It converts the given string into uppercase letter.
toString() It provides a string representing the particular object.
valueOf() It provides the primitive value of string object.

Example
<!DOCTYPE html>
<html>
<body>
<script>
varstr="javascript";
document.write(str.charAt(2));
var s1="javascript ";
var s2="concat example";
var s3=s1.concat(s2);
document.write(s3);
var s1="javascript from javatpointindexof";
var n=s1.indexOf("from");
document.write(n);
var s1="javascript from javatpointindexof";
var n=s1.lastIndexOf("java");
document.write(n);
var s1="JavaScript toLowerCase Example";
var s2=s1.toLowerCase();
document.write(s2);
var s1="JavaScript toUpperCase Example";
var s2=s1.toUpperCase();
document.write(s2);
</script>
</body>
Marks Obtained Dated Signed of
</html>
teacher
Process Product Total(50)
Related(35) Related(15)

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

Client Side Scripting Languages (22519)

Practical No-6.Create web page using Form Elements

What are forms?

<form> is just another kind of XHTML/HTML tag. Forms are used to create (rather primitive) GUIs on
Web pages. Usually the purpose is to ask the user for information. The information is then sent back to
the server. A form is an area that can contain form elements

The syntax is:

<formparameters>...form elements...</form>
Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc.
The arguments to form tell what to do with the user input
action="url" (required) :-Specifies where to send the data when the Submit button is clicked
method="get" (default):-Form data is sent as a URL with ?form_data info appended to the endCan be
used only if data is all ASCII and not more than 100 characters
method="post" :-Form data is sent in the body of the URL request. Cannot be bookmarked by most
browsers
target="target" :-Tells where to open the page sent as a result of the request.target= _blank means
open in a new window. target= _top means use the same window

The <input> tag

Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of
element it istype can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image
Other common input tag arguments include:
name: the name of the element
id: a unique identifier for the element
value: the “value” of the element; used in different ways for different values of type
readonly: the value cannot be changed
disabled: the user can’t do anything with this element
Other arguments are defined for the input tag but have meaning only for certain values of type

Text input
A text field:
<input type="text" name="textfield" value="with an initial value" />

A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea>

A password field:
<input type="password" name="textfield3" value="secret" />

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal