Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
262 views

Client Side Scripting Language (22519) Semester - V (CM) : A Laboratory Manual For

Uploaded by

SY CHAUBAL YATISH SHASHIKANT
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
262 views

Client Side Scripting Language (22519) Semester - V (CM) : A Laboratory Manual For

Uploaded by

SY CHAUBAL YATISH SHASHIKANT
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

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
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 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;
document.write("a+b=" + result1);
document.write("<br/>");

var result2 = (a < b);


document.write("a<b=" + result2);
document.write("<br/>");

var result3 = a && b;


document.write("a&&b=" + result3);
document.write("<br/>");

var result4 = (a & b);


document.write("a&b=" + result4);
document.write("<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) {
document.write("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();


arr.push(5, 6);
arr.push(8, 9);
document.write("After join method" + arr.join(","))

arr.pop()
document.write("<br>After pop method" + arr.join(","))

arr.shift()
document.write("<br>After shift method" + arr.join(","))

arr.reverse()
document.write("<br>After reverse method" + arr.join(","))

arr.unshift(1)
document.write("<br>After unshift method" + arr.join(","))

</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 ";
document.write("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 = str2.concat(str3);
var str6 = str1.concat(str2, str3);
document.write("str4: " + str4);
document.write("<br>str5: " + str5);
document.write("<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 (document.myform.customer.value == "") {
alert("Enter some value!");
return;

13
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "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 = window.open("", "", "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 = document.getElementById('email').value
var regex = /^([a-zA-Z0-9_\.]+)@([a-zA-Z0-9_\.]+)\.([a-zA-Z]{2,5})$/

15
var res = regex.test(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="this.value='What is
rollover?'"
onmouseout="this.value='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="https://www.youtube.com/" onMouseOver="window.status='HTMLcenter';return true"
onMouseOut="window.status='';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="file.png" 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/file.png', 'img/img1.jpg', 'img/img2.jpg')
banner = 0
function ShowBanners() {
if (document.images) {
banner++
if (banner == MyBanners.length) {
banner = 0
}
document.ChangeBanner.src = MyBanners[banner]
setTimeout("ShowBanners()", 500)
}
}
</script>

20
<body onload="ShowBanners()">
<center>
<img src="img/file.png " width="300" height="200" name="ChangeBanner" />
</center>
</body>

</html>

Output :-

21

You might also like