Scribd
Upload
21 views

Practical Sanket Css13

Uploaded by

Darshan Khajbage
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Practical Sanket Css13

Uploaded by

Darshan Khajbage
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

A Laboratory Manual for

Client Side Scripting


Language
(22519)
Semester-V
(CW/CM/CO/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 Fifth Semester of Diploma in Computer Science and


Engineering 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
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


1 forarithmetic expression evaluation
and
message printing.
*Develop JavaScript to use
2 decisionmaking and looping
statements
*Develop JavaScript to
3 implementsArray functionalities
*Develop javascript to
4 implementfunctions
Develop javascript to implement
5 Strings.
*Create web page using Form
6
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
9 intrinsicjava 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
14
implementingMenus.
Develop a webpage for implementing
15 Status bars and web page protection.
*Develop a web page for
16
implementingslideshow, banner.

Total
PRACTICAL 1

AIM – WRITE A SIMPLE JAVASCRIPT WITH HTML FOR


ARITHMETIC EXPRESSION EVALUATION AND
MESSAGE PRINTING

 CODE :-
<html>
<head><title>Arithmetic evaluation & Message Printing</title>
<body>
<script type="text/javascript">

var l=parseFloat(prompt("Enter Length of Rectangle :"));


var b=parseFloat(prompt("Enter Breadth of Rectangle :"));
var area=l*b;
var perimeter=2*(l+b);
document.write("<br>Area of Rectangle is :-"+area+" sq.unit"+
"<br>Perimeter of Rectangle is :-"+perimeter+" unit");

</script>
</body>
</head>
</html>
 OUTPUT :-

 CONCLUSION :-
In this practical I successfully created a webpage to
implement arithmetic evaluation and message printing.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
PRACTICAL 2

AIM - DEVELOP JAVASCRIPT TO USE DECISION


MAKING & LOOPING STATEMENTS

 CODE :-

<html>
<head><title>PR 1 Decision Making Statement & Looping Statement</title>
<body>
<script type="text/javascript">

alert("Enter 3 Numbers to check which one is largest...");


var n1=parseFloat(prompt("Enter 1st Number :"));
var n2=parseFloat(prompt("Enter 2nd Number :"));
var n3=parseFloat(prompt("Enter 3rd Number :"));

if(n1==n2 && n2==n3)


{
alert("All are Equal !!");
}
else if(n1>=n2 && n1>=n3)
{
document.write(n1+" is largest among all..!");
}
else if(n2>=n1 && n2>=n3)
{
document.write(n2+" is largest among all..!");
}
else
{
document.write(n3+" is largest among all..!");
}

</script>
</body>
</head>
</html>

 OUTPUT :-

 CODE :-

<html>
<head><title>PR 1 Decision Making Statement & Looping Statement</title>
<body>
<script type="text/javascript">

var num=parseFloat(prompt("Enter a Number to get it's table :"));


document.write("<br>"+num+"'s Table is as Follows :-<br>");

for(var i=1;i<=10;i++)
{
document.write("<br>"+num+" * "+i+" = "+(num*i));
}
</script>
</body>
</head>
</html>

 OUTPUT :-

 CONCLUSION :-
In this practical I successfully applied Decision Making &
Looping Statements to develop s JavaScript.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
PRACTICAL 3

AIM - DEVELOP JAVASCRIPT TO IMPLEMENT ARRAY


FUNCTIONALITIES

 CODE :-

<html>
<head><title>PR 2 Array Functionalities</title>
<body>
<h1>Array Functionalities</h1>
<script type="text/javascript">

var arr = new Array(10, "CSS", true, 3.14);


document.write("<b>Considering this array :-</b> " + arr + "<br>");

var r = arr.join(" & ");


document.write("<b>After using join(' & ') array will be :-</b> " + r +
"<br>");

arr.push("AJP", 90.71);
document.write("<b>After using push('AJP', 90.71) array will be :-</b> " +
arr + "<br>");

var e1 = arr.pop();
document.write("<b>After using pop() array will be :-</b> " + arr +
"<br><b>(Here, deleted element is :- " + e1 + ")<br></b>");

arr.unshift(53, "Sanket");
document.write("<b>After using unshift(53, 'Manav') array will be :-</b> " +
arr + "<br>");

var e2 = arr.shift();
document.write("<b>After using shift() array will be :-</b> " + arr +
"<br><b>(Here, deleted element is :- " + e2 + ")<br></b>");
var arr2 = [70, false, "MAD"];
var new_array = arr.concat(arr2);
document.write("<b>After using concat([70, false, 'MAD']) array will be :-
</b> " + new_array + "<br>");

var arr3 = arr.splice(2, 3, false, "MAD", 12.5);


document.write("<b>After using splice(2, 3, false,'MAD', 12.5) array will be
:-</b> " + arr + "<br><b>(Spliced elements are :- " + arr3 + ")</b><br>");

var num_arr = [50,10,30,20,40];


document.write("<br><br><b>Array of Number contains :-</b> " + num_arr
+ "<br>");

num_arr.reverse();
document.write("<b>After using reverse() on Number's array it will be :-
</b> " + num_arr + "<br>");

num_arr.sort();
document.write("<b>After using sort() on Number's array it wil be :-</b> " +
num_arr + "<br>");

</script>
</body>
</head>
</html>
 OUTPUT :-

 CONCLUSION :-
In this practical I successfully applied and demonstrate
Array Functionalities to develop a JavaScript.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
PRACTICAL 4

AIM - DEVELOP JAVASCRIPT TO IMPLEMENT


FUNCTIONS

 CODE :-

<html>
<head><title>PR 3 Implementation of Function</title>
<body>
<script type="text/javascript">

function factorial(n)
{
if (n === 0 || n === 1)
{
return (1);
}
else
{
return (n * factorial(n - 1));
}
}

var num = parseInt(prompt("Enter a number to get it's Factorial :"));


document.write("The factorial of " + num + " is " + factorial(num));

</script>
</body>
</head>
</html>
 OUTPUT :-

 CONCLUSION :-
In this practical I successfully implement Functions to
develop a JavaScript.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
PRACTICAL 5

AIM – CREATE A WEBPAGE USING FORM ELEMENT

 CODE :-

<html>
<head><title>Form Elements Demo</title>
</head>
<body>
<form action="">
Enter User name:<br>
<input type="text" name="uid"><br>
Enter User password:<br>
<input type="password" name="upass"><br>

<input type="radio" name="gender" value="male" checked> Male


<input type="radio" name="gender" value="female"> Female<br>

<input type="checkbox" name="v1" value="Bike"> I use bike


<input type="checkbox" name="v2" value="Car"> I use car <br>

<input type="submit" value="Submit"> or


<input type="reset" value="Clear All">

</form>
</body>
</html>
 OUTPUT :-
 CONCLUSION :-
In this practical I successfully created a webpage using
some different Form Elements.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
PRACTICAL 6

AIM – CREATE A WEBPAGE TO IMPLEMENT FORM


EVENTS. PART I

 CODE :-

<html>
<head>
<title>Form Event Demo</title>
<script>
function display()
{
var v1 = "No Bike";
var v2 = "No Car";

if (document.form1.v1.checked)
{
v1 = document.form1.v1.value;
}
if (document.form1.v2.checked)
{
v2 = document.form1.v2.value;
}
document.write("<body style='background-color:orange'>"+
"<b>Your Info as per Form</b><br>" +
"<br><b><i>Username:</i></b> " + document.form1.uid.value +
"<br><b><i>Password:</i></b> " + document.form1.upass.value +
"<br><b><i>Gender:</i></b> " + document.form1.gender.value +
"<br><b><i>Vehicles:</i></b> " + v1 + ", " + v2);
}
function submit_msg()
{
alert("Form submitted successfully..!");
display();
}
function reset_msg()
{
alert("Form cleared..!");
}

function gender_msg()
{
alert("You've selected :- " + document.form1.gender.value);
}

</script>
</head>
<body>
<form action="" name="form1" onsubmit="submit_msg()"
onreset="reset_msg()">
Enter User name:<br>
<input type="text" name="uid"><br>

Enter User password:<br>


<input type="password" name="upass"><br>

<input type="radio" name="gender" value="Male" checked


onclick="gender_msg()"> Male
<input type="radio" name="gender" value="Female"
onclick="gender_msg()"> Female<br>

<input type="checkbox" name="v1" value="Bike"> I use bike


<input type="checkbox" name="v2" value="Car"> I use car <br>

<input type="submit" value="Submit"> or


<input type="reset" value="Clear All">
</form>
</body>
</html>
 OUTPUT :-
 CONCLUSION :-
In this practical I successfully created a webpage
implementing some different Form Events like onclick, onsubmit, onreset.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
PRACTICAL 7

AIM - CREATE A WEB PAGE TO IMPLEMENT FORM


EVENTS. PART II

 CODE :-

<html>
<head>
<title>New Survey Form</title>
<script>
var key_pressed_once = false;

function show_favorite_color()
{
alert("You selected: " + document.form2.color.value);
}

function submit_survey()
{
alert("Survey submitted successfully!");
display_info();
}

function reset_survey()
{
alert("Survey reset!");
key_pressed_once = false;
}

function display_info()
{
document.write("<body style='background-color:lightblue'>" +
"<b>Your Survey Information:</b><br>" +
"<br><b><i>Username:</i></b> " +
document.form2.username.value +
"<br><b><i>Favorite Color:</i></b> " +
document.form2.color.value +
"<br><b><i>Feedback:</i></b><br>" +
document.form2.feedback.value);
}

function key_pressed()
{
if (!key_pressed_once)
{
alert("You pressed a key in the feedback section!");
key_pressed_once = true;
}
}

function mouse_over_submit()
{
alert("You're about to submit the survey!");
}
</script>
</head>
<body>
<form action="" name="form2">
Enter Username:<br>
<input type="text" name="username"><br>

Select your favorite color:<br>


<select name="color" onchange="show_favorite_color()">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Yellow">Yellow</option>
</select><br>
Provide your feedback:<br>
<textarea name="feedback" rows="4" cols="40"
onkeypress="key_pressed()"></textarea><br>

<input type="submit" value="Submit" onclick="submit_survey()"


onmouseover="mouse_over_submit()"> or
<input type="reset" value="Clear All" onclick="reset_survey()">
</form>
</body>
</html>

 OUTPUT :-
 CONCLUSION :-
In this practical I successfully created a webpage
implementing some different Form Events like onclick, onchange,
onkeypress.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
Practical No :- 8
AIM :- Develop a webpage using intrinsic java functions

 CODE

<html>
<head>
<title>Using Intrinsic JavaScript Functions</title>
</head>
<body>
<FORM name="contact" action="#" method="post">
<P>
First Name: <INPUT type="text" name="Fname"/> <BR>
Last Name: <INPUT type="text" name="Lname"/><BR>
Email: <INPUT type="text" name="Email"/><BR>
<img src="submit.jpg"
onclick="javascript:document.forms.contact.submit()"/>
<img src="reset.jpg"
onclick="javascript:document.forms.contact.reset()"/>
</P>
</FORM>
</body>
</html>

 Output :-
 CONCLUSION :-
In this practical I successfully applied and demonstrate
implement intrinsic java functions.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
Practical No:- 9
Develop a webpage for creating session and persistent cookies.
Observe the effects with browser cookies settings.

 CODE

<html>
<head>
<script type = "text/javascript">
function WriteCookie() {
if(document.myform.customer.value == "" )
{
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" >
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
 Output:-

 CONCLUSION :-
In this practical I successfully applied and demonstrate
implement creating session and persistent cookies.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
Practical No :- 10
AIM :- Develop a webpage for placing the window on the screen and
working with child window.

 CODE

<!DOCTYPE html>
<html>
<body>
<p>Click the button to open an about:blank page in a new browser window that
is 200px wide and
100px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>
 Output:-
 CODE

<!DOCTYPE html>
<html>
<body>
<p>Click the button to open an about: Google page in a new browser window
that is 200px wide and 200px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var myWindow = window.open("http://google.com/", "Google",
"width=200,height=200");
}
</script>
</body>
</html>

 Output:-
 CONCLUSION :-
In this practical I successfully applied and demonstrate
implement placing the window on the screen and working with child window.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
Practical No :- 11
AIM :- Develop a web page for validation of form fields using regular
expressions.

1. Develop a web page for validation of form fields using regular


expressions.

 CODE

<!DOCTYPE html>
<html lang="en">
<head>

<title>Name and Phone Validation</title>


</head>
<body>

<h2>Enter Your Details</h2>

<form id="myForm" onsubmit="return validateForm()">


<label for="name">Name:</label><br>
<input type="text" id="name" placeholder="Enter your name">
<div id="nameError" class="error"></div><br>

<label for="phone">Phone Number:</label><br>


<input type="text" id="phone" placeholder="Enter your phone number">
<div id="phoneError" class="error"></div><br><br>

<button type="submit">Submit</button>
</form>

<div id="result"></div>

<script>
function validateForm() {

const nameRegex = /^[a-zA-Z\s]{3,}$/; // At least 3 alphabetic characters


const phoneRegex = /^[0-9]{10}$/; // Exactly 10 digits

const name = document.getElementById('name').value;


const phone = document.getElementById('phone').value; let

isValid = true;

if (!nameRegex.test(name)) {
document.getElementById('nameError').textContent = "Please enter a valid
name (at least 3 letters)."; isValid =
false;
} else { document.getElementById('nameError').textContent =
"";
}

if (!phoneRegex.test(phone)) {
document.getElementById('phoneError').textContent = "Please enter a
valid 10-digit phone number.";
isValid = false;
} else { document.getElementById('phoneError').textContent =
"";
}

if (isValid) {
document.getElementById('result').textContent = `Name: ${name}, Phone
Number: ${phone}`;
}

return false;
}

</script>
</body>
</html>
 Output:-

 CONCLUSION :-

In this practical I successfully applied and demonstrate


a web page for validation of form fields using regular expressions.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
Practical No :- 12
Aim:- Develop a webpage for implementing Menus

 CODE

<html>
<head>
<title>Pulldown Menu Example</title>
<script>
function displayPage(ch)
{
page = ch.options[ch.selectedIndex].value
if(page != "")
{
window.location = page
}
}
</script>
</head>
<body>
<form name='form1' action="#">
Select your favourite website:
<select name="mymenu" onchange="displayPage(this)">
<option value="https://www.google.com">Google</option>
<option value="https://www.yahoo.com">Yahoo</option>
<option value="https://www.msbte.org.in">MSBTE</option>
</select>
</form>
</body>
</html>
 Output:-

 CODE

<html>
<head>
<title>Context Menu Example</title>
<style>
.menu {
width: 150px;
border-style: solid;
border-width: 1px;
border-color: grey;
position: fixed;
display: none;
}
.menu-item {
height: 20px;
}
.menu-item:hover {
background-color: #6CB5FF;
cursor: pointer;
}
</style>
<script>
var menuDisplayed = false

var menuBox = null


window.addEventListener("contextmenu", showMenu, false)
window.addEventListener("click", hideMenu, false)

function showMenu()
{
var left = arguments[0].clientX
var top = arguments[0].clientY
menuBox = window.document.querySelector('.menu')
menuBox.style.left = left + 'px'
menuBox.style.top = top + 'px'
menuBox.style.display = 'block'
arguments[0].preventDefault()
menuDisplayed = true
}
function hideMenu()
{
if(menuDisplayed == true) {
menuBox.style.display = 'none'
}
}
</script>
</head>
<body>
</h2>Right click mouse to view Context Menu</h2>
<div class="menu">
<div class="menu-item">Google</div>
<div class="menu-item">Facebook</div>
<hr>
<div class="menu-item">MSN</div>
<div class="menu-item">Bing</div>
</div>
</body>
</html>
<html>
<head>
<title>Context Menu Example</title>
<style>
.menu {
width: 150px;
border-style: solid;
border-width: 1px;
border-color: grey;

position: fixed;

display: none;
}
.menu-item {
height: 20px;
}
.menu-item:hover {
background-color: #6CB5FF;
cursor: pointer;
}
</style>

<script>
var menuDisplayed = false
var menuBox = null
window.addEventListener("contextmenu", showMenu, false)
window.addEventListener("click", hideMenu, false)

function showMenu()
{
var left = arguments[0].clientX
var top = arguments[0].clientY
menuBox = window.document.querySelector('.menu')
menuBox.style.left = left + 'px'
menuBox.style.top = top + 'px'
menuBox.style.display = 'block'
arguments[0].preventDefault()
menuDisplayed = true
}
function hideMenu()
{
if(menuDisplayed == true) {
menuBox.style.display = 'none'
}
}
</script>
</head>
<body>
</h2>Right click mouse to view Context Menu</h2>
<div class="menu">
<div class="menu-item">Google</div>
<div class="menu-item">Facebook</div>

<hr>

<div class="menu-item">MSN</div>
<div class="menu-item">Bing</div>
</div>
</body>
</html>

 Output:-
 CONCLUSION :-
In this practical I successfully applied and demonstrate
implementing Menus.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)
Practical No :- 13
Aim:- Develop a webpage for implementing Slideshow and
Banner

 CODE

<html>
<head>
<title>Banner Advertisements</title>
</head>
<body bgcolor="#EEEEEE">
<a href="https://www.javatutsweb.com">
<img src="java-programming-ad.jpg"/>
</a>
</body>
</html>

 Output:-

 CODE

<html>
<head>
<title>Image SlideShow</title>
<script>
var images = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"]; var count = 0;
function previousImage()
{
if(count!=0)
count--;
var id = document.getElementById("imageId");
id.src = "images/" + images[count];
} function nextImage() {
if(count!=4)
count++;
var id = document.getElementById("imageId");
id.src = "images/" + images[count];
}
</script>
</head>
<body>
<center>

<img id="imageId" src="images/01.jpg" width="300" height="200"/>


<br/>
<hr>
<input type="button" value="< Prev Image"
onclick="previousImage()"/>
<input type="button" value="Next Image >"
onclick="nextImage()"/>
</center>
</body>
</html>
 Output:-

 CONCLUSION :-
In this practical I successfully applied and demonstrate
implementing Slideshow and Banner.

Marks Obtained Dated Signed of


Teacher
Process Product Total
Related (15) Related (10) (25)

You might also like