A Laboratory Manual for
Client Side Scripting
Language
(22519)
Semester –V
(CM)
Maharashtra State Board of Technical Education, Mumbai.
1
Maharashtra State
Board of Technical Education
Certificate
This is to certify that Mr. JAY MANGESH PATIL
Roll No 3129 of Fifth Semester of Diploma in Computer Technology
Of Institute :- Government Polytechnic , Vikramgad.
(Code 1547 ) has completed the term work satisfactorily in course Client Side
Scripting languages (22519) for the academic year 2021 to 2022 as
Prescribed in the curriculum.
Place: Vikramgad Enrollment No: 1915470029
Date: …………………………………. Exam. Seat No: …………………………………
Subject Teacher Head of Department Principal
Seal of Institution
2
Content Page
List of Practical’s and Progressive assessment Sheet
Dated
Date of Date of Assessment
[Link] 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 making
2
and looping statements
Develop JavaScript to implements Array
3
functionalities
Develop javascript to implement
4
functions
5 Develop javascript to implement Strings.
6 Create web page using Form Elements
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 java
9
functions
Develop a webpage for creating session
10 and persistent cookies. 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 form
12
fields using regular expressions.
13 Create web page with Rollovers 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
3
Practical No 1:-Write simple JavaScript with HTML for arithmetic
expression evaluation and message printing.
Program :-
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a = 33;
var b = 12;
var result1 = a + b;
[Link]("a+b=" + result1);
[Link]("<br/>");
var result2 = (a < b);
[Link]("a<b=" + result2);
[Link]("<br/>");
var result3 = a && b;
[Link]("a&&b=" + result3);
[Link]("<br/>");
var result4 = (a & b);
[Link]("a&b=" + result4);
[Link]("<br/>");
</script>
</body>
</html>
Output :-
4
Practical No 2:- Develop JavaScript to use decision and looping
statements.
Program :-
<html>
<head>
<title>If statement</title>
</head>
<body>
<script type="text/javascript">
var x = 7;
var x = 7;
if (x == 7) {
[Link]("both are equal");
}
</script>
</body>
</html>
Output :-
5
Practical No 3 :- Develop JavaScript to implements Array
functionalities.
Program :-
<html>
<head>
<script>
var arr = new Array();
[Link](5, 6);
[Link](8, 9);
[Link]("After join method" + [Link](","))
[Link]()
[Link]("<br>After pop method" + [Link](","))
[Link]()
[Link]("<br>After shift method" + [Link](","))
[Link]()
[Link]("<br>After reverse method" + [Link](","))
[Link](1)
[Link]("<br>After unshift method" + [Link](","))
</script>
</head>
</html>
Output :-
6
Practical No 4 :- Develop JavaScript to implement functions.
Program :-
<html>
<head>
<title>calling function without argument</title>
<script type="text/javascript">
var x = 10;
function show() {
var item = " pen ";
[Link]("the cost of the" + item + "is" + x);
}
</script>
</head>
<body>
<script type="text/javascript">
show();
</script>
</body>
</html>
Output :-
7
Practical No 5 :- Develop JavaScript to implement Strings.
Program :-
<html>
<head>
<title>Scope</title>
<script>
var str1 = new String("Meenakshi");
var str2 = new String("Anurag");
var str3 = new String("Thalor");
var str4 = str1 + str3;
var str5 = [Link](str3);
var str6 = [Link](str2, str3);
[Link]("str4: " + str4);
[Link]("<br>str5: " + str5);
[Link]("<br>str6: " + str6);
</script>
</head>
<body>
</body>
</html>
Output :-
8
Practical No 6 :- Create web page using Form Elements.
Program :-
<html>
<body>
<form action="">
User name:<br>
<input type="text" name="userid"><br>
User password:<br>
<input type="password" name="psw"><br>
<input type="submit" value="Submit"><br>
<input type="reset"><br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other">Other<br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car <br>
</form>
</body>
</html>
Output :-
9
Practical No-7: Create web page to implement Form Events. Part I
Program :-
<html>
<head>
<script type="text/javascript">
function sayHello()
{
alert("Hello World")
}
</script>
</head>
<body>
<form><input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>
Output :-
10
Practical No-8: Create web page to implement Form Events. Part II
Program :-
1. onkeypress event
<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" placeholder="Press Enter" onkeypress="myFunction()">
</body>
2. onload event
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>
</html>
Output :-
1. onkeypress event
11
2. onload event
Practical No 9:- Develop a webpage using intrinsic java functions
Program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
12
<h2 >Login Page </h2>
<form >
Username <input type="text" placeholder="Username"> <br> <br>
Passcode <input type = "password" placeholder="Password"> <br> <br>
<input type="submit" value="Login">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output :-
Practical No10:- Develop a webpage for creating session and persistent
cookies. Observe the effects with browser cookies settings.
Program :-
<html>
<head>
<script type="text/javascript">
function WriteCookie() {
if ([Link] == "") {
alert("Enter some value!");
return;
13
}
cookievalue = escape([Link]) + ";";
[Link] = "name=" + cookievalue;
alert("Setting Cookies : " + "name=" + cookievalue);
}
</script>
</head>
<body>
<form name="myform">
Enter name: <input type="text" name="customer" /> <br> <br>
<input type="button" value="Set Cookie" onclick="WriteCookie();" />
</form>
</body>
</html>
Output :-
Practical No.11:- Develop a webpage for placing the window on the
screen and working with child window.
Program :-
<!DOCTYPE html>
<html>
<body>
14
<p>Click the button to open an about:blank page <br> In a new browser window that is
200px wide and
100px tall.</p>
<button onclick="myFunction()">Move on the page</button>
<script>
function myFunction() {
var myWindow = [Link]("", "", "width=200,height=100");
}
</script>
</body>
</html>
Output :-
Practical No.12:- Develop a web page for validation of form fields using
regular expressions.
Program :-
<html>
<head>
<title>Check Email ID</title>
<script>
function checkEmail() {
var email = [Link]('email').value
var regex = /^([a-zA-Z0-9_\.]+)@([a-zA-Z0-9_\.]+)\.([a-zA-Z]{2,5})$/
15
var res = [Link](email)
if (!res) {
alert('Please enter valid email id')
}
else {
alert('Thank you')
}
}
</script>
</head>
<body>
<form name="myform" action="#" method="post">
Enter Email ID <input type="text" id="email" /><br />
<input type="button" value="Submit" onclick="checkEmail()" />
</form>
</body>
</html>
Output :-
Practical No.13:- Create web page with Rollovers effect.
Program :-
<HTML>
<head></head>
<Body>
16
<textarea rows="2" cols="50" name="rollovertext" onmouseover="[Link]='What is
rollover?'"
onmouseout="[Link]='Rollover means a webpage changes when the user moves his or her
mouse over an object on the page'">
</textarea>
</body>
</html>
Output :-
Practical No.14:- Develop a webpage for implementing Menus.
Program :-
<html>
<body>
<h2>Select Field</h2>
<select>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechaanical">Mechanical</option>
17
<option value="Civil">Civil</option>
</select>
</body>
</html>
Output :-
Practical No.15:- Develop a webpage for implementing Status bars and
web page protection.
Program :-
1. Status bars
<html>
<head>
<title>JavaScript Status Bar</title>
</head>
<body>
<a href="[Link] onMouseOver="[Link]='HTMLcenter';return true"
onMouseOut="[Link]='';return true">
<h2>Youtube</h2>
</a>
</body>
</html>
18
2. web page protection.
<html>
<head>
<script language="JavaScript">
function function2() {
alert("This image is copyrighted")
}
</script>
</head>
<body oncontextmenu="function2()">
<p>Right click in the image.</p>
<img oncontextmenu="function2()" src="[Link]" alt="copyrighted image" width="99"
height="76">
</body>
</html>
Output :-
1. Status bars
19
2. web page protection.
Practical No.16:- Develop a web page for implementing slideshow,
banner.
Program :-
<html>
<head>
<script language="Javascript">MyBanners = new
Array('img/[Link]', 'img/[Link]', 'img/[Link]')
banner = 0
function ShowBanners() {
if ([Link]) {
banner++
if (banner == [Link]) {
banner = 0
}
[Link] = MyBanners[banner]
setTimeout("ShowBanners()", 500)
}
}
</script>
20
<body onload="ShowBanners()">
<center>
<img src="img/[Link] " width="300" height="200" name="ChangeBanner" />
</center>
</body>
</html>
Output :-
21
