Client Side Scripting (CSS) (22519) Semester - V (CO) : A Laboratory Manual For

A Laboratory Manual
for
Client Side Scripting(CSS)
(22519)
Semester – V
(CO)
Maharashtra state
Board of Technical Education, Mumbai

Maharashtra state
Board of Technical Education, Mumbai
Certificate
This is to certify that Mr. / Ms …Esha C. Rangari….……………
Roll No... ……65………......of Fifth Semester of Diploma in
………… Computer Science & Engineering..…………………….
of Institute…Government Polytechnic Gondia………..…………..
(Code ..... 22519..............) has attained predefined practical
outcomes (PROs) satisfactorily in course Client side scripting (22519)
for the academic year 20...20.to 20.-21..as prescribed in the
curriculum.
Place : Gondia Enrollment No.: 2012420327

Date : Exam Seat No.:
Course Teacher Head of the Department Principal

Content Page
Date of Date Assessm Date

Sr. Title of practical d Remarks
performa of ent
No sign
nce submiss marks(
ion 25) of
Teac
her
Write simple JavaScript with
1 HTML for arithmetic expression
evaluation and
message printing.
Develop JavaScript to use
2
decision making and looping
statements
Develop JavaScript to
3
implements Array
functionalities
Develop javascript to
4
implement functions
Develop javascript to
5
implement Strings.
Create web page using Form
6
Elements
Create web page to implement
7
Form Events .Part I
Create web page to implement
8
Form Events .Part II
Develop a webpage using
9
intrinsic java functions
Develop a webpage for
10 creating session and persistent
cookies. Observe the effects
with browser
cookies settings.
Practical No. 1
Aim : Write simple JS Program with HTML for performing Arithmetic
expression evaluation and message printing.
Resource Used :
Sr Name of Broad Quantity Remarks

No Resource Specification
1. Operating Windows 10 64- bit 1

System
2. Hardware ASUS Laptop i3 10th generation 1

8GB RAM
3. Software Notepad, Visual Studio, Chrome. 1
4. Microsoft Microsoft Word 1

Package
Theory :
What is HTML?
▪ HTML stands for Hypertext markup language

▪ HTML is the standard markup language for creating Web pages.
▪ HTML describes the structure of a Web page.
▪ HTML consists of series of elements and tags represent these elements.
What is Javascript?
▪ Javascript is a dynamic computer programming language.It is lightweight and

commonly used web pages of client side script to interact with user and make a
dyanamic page.
▪ Javascript was first known as Live script and Netscape introduced it in 1995.
Syntax:
<script ...>
JavaScript code
</script>
The script has takes two important attributes:
▪ Language
▪ Type
Explanation:
1. Document.write: This statement is used to display desired message on web browser.

2. Comments in java:
3. The // is a single line comments
4. The /*…*/ can be used as multi line comments
5. The XHTML  is also known as javascript
Arithmetic Operators:
1. Addition (+):-This operator is used to add two operands.

2. Subtraction (-):-This operator is used to subtract two operands.
3. Multiplication (*):-This operator is used to multiple two operand.
4. Division (/):-This operator is used to divide two operands.
5. Modulus (%):-This operator is used to check the Remainder.
Program Code :
<html>
<head>
<center>
<h1>CSS : Practical No 1</h1>
<h2>Develop a JS Program with HTML for performing Arithmetic Operation

by taking input from user. </h2>
<br><br>
<script type= "text/javascript">

var c;
var a = Number(prompt(" Enter First Number : "));
var b = Number(prompt(" Enter Second Number : "));
c = a + b;
document.write(" <h3> Addition : " +c+ "<br><br>");
c = a - b;
document.write(" <h3> Substraction : " +c+ "<br><br>");
c = a * b;
document.write(" <h3> Multiplication : " +c+ "<br><br>");
c = a / b;
document.write(" <h3> Division : " +c+ "<br><br>");
c = a % b;
document.write(" <h3> Moduls : " +c+ "<br><br>");
</script>
</center>
</head>>
</html>
Output :
Conclusion:
We understand that how to write javascript with HTML for arithmetic expression
evaluation and message printing.
Marks Obtained Dated signature

of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 2
Aim : Develop a JavaScript Program to use Decision Making and Looping
Statements.
Resource Used :


System

8GB RAM

Package
Theory :
Decision Making:
Decision making structures require that the programmer specifies one or more
conditions to be evaluated or tested by the program, along with a statement or
statements to be executed if the condition is determined to be true, and optionally,
other statements to be executed if the condition is determined to be false.
if...else if... statement:
The if...else if... statement is an advanced form of if…else that allows JavaScript to
make a correct decision out of several conditions.
Syntax:
if (expression 1){
Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
} else if (expression 3) {
} else {
Statement(s) to be executed if no expression is true
Program Code :
<html>
<body>
<center>
<h2>Develop a JS Program to use Decision Making and Looping

Statements</h2>
<br><br>
<script>
var result = prompt("Enter Marks");
if(result >= 98)
document.write(" <h1> College : IIT");
else if(result >= 95)
document.write(" <h1> College : COEP");

else if(result >= 90)
document.write(" <h1> College : VJTI");
else
document.write(" <h1> College : Other");
</script>
</center>
</body>
</html>
Output :
Conclusion:
We understand that how to use decision-making & looping statements in JavaScript.

of Teacher
Practical No. 3
Aim : Develop a JavaScript to implement Array functionalities.
Resource Used :


System

8GB RAM

Package
Theory :
JavaScript Arrays
▪ An array is a special variable, which can hold more than one value at a time.
▪ JavaScript arrays are used to store multiple values in a single variable.
Declaring an array
There are 2 ways to construct an array in JavaScript
1. By array literal
2. By using an Array constructor (using new keyword)

1. By array literal : This is the easiest way to create a JavaScript Array.
Syntax: var array_name = [item1, item2, …];
2. By using an Array constructor (using new keyword) : You can also create an array using
Array constructor with new keyword
• This declaration has five parts:
1) var keyword
2) Array name
3) Assignment operator
4) new operator
5) Array ( ) constructor
Syntax: var array_name = new Array();
Program Code :
<html>
<body>
<center>
<h2>Develop a JavaScript to implement Array functionalities.</h2>
<br><br>
<script type="text/javascript">
var arr = [13, 20, 7, 2, 1, 5, 8];
var sum=0, product = 1;
for(var i=0; i<arr.length; i++)
{
sum += arr[i];
product *= arr[i];
document.write("<h3>Array elements are " + arr + "<br />");
document.write("<h2>Sum : " + sum + "</h3>");
document.write("<h2>Product : " + product + "</h3>");
</script>
</center>
</body>
</html>
Output :
Conclusion:
We understand that how to implement arrays in JavaScript.

of Teacher
Practical No. 4
Aim : Develop a JavaScript Program to implement Functions.
Resource Used :


System

8GB RAM

Package
Theory :
What is Function?
▪ A function is a group of reusable code which can be called anywhere in your

program.
▪ This eliminates the need of writing the same code repeatedly.
▪ It helps programmers in writing modular codes.
▪ Functions allow a programmer to divide a big program into a number of small and
manageable functions.
Declaring A Function:
Before we use a function, we need to define it. The most common way to define a
function in JavaScript is by using the function keyword, followed by a unique
function name, a list of parameters (that might be empty), and a statement block
surrounded by curly braces.
Syntax:
function functionname(parameter-list)
statements
Program Code :
<html>
<head>
<center>
<h2>Develop a JS Program to implement Functions</h2>
<br><br>
<script>
function factorial(num)
{
var fact = 1;
for(i=1;i<=num;i++)
{
fact = fact * i ;
}
alert("Factorial of Number "+num+" is : " +fact);
}
</script>
</center>
</head>
<body>
<center>
<button onclick="factorial(6)"> Factorial of 6 </button>
</center>
</body>
</html>
Output :
Conclusion:
We understand that how implement functions JavaScript.

of Teacher
Practical No. 5
Aim : Develop a JavaScript Program to implement Strings.
Resource Used :


System

8GB RAM

Package
Theory :
JavaScript Strings
▪ JavaScript Strings are used for storing and manipulating text.
▪ Strings in JavaScript can be enclosed within either “single quotes”, “double
quotes” or “backticks”:
var single_quoted = 'Single quoted string';
var double_quoted = "double-quoted string";
var backticks = `backticks string`;
String length
▪ The length property has the string length.
▪ Note that str.length is a numeric property, not a function. There is no need to
add parenthesis after it.
String Methods
1. str.toLowerCase() : Converts a string to lowercase and returns a new string.
2. str.toUpperCase() : Converts a string to UPPERCASE and returns a new string.
3. str.indexOf(substr, [pos]) : Returns the index of (the position of) the first
occurrence of a specified text in a string. Returns -1 if the text is not found.
4. str.concat(string) : Joins two or more strings. This method can be used instead of
the plus operator.
Program Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Practical No. 05</title>
</head>
<body>
<center>
<h2>Develop Javascript To Implement Strings</h2>
<br><br>
<h3 id="fname">Sample String : Esha</h3>
<script>
var name =
document.getElementById("fname").textContent.slice(16);
function toUpperCaseString(){
document.getElementById("result").textContent =
"Uppercase : " + name.toUpperCase();
}
function toLowerCaseString(){
"Lowercase : " + name.toLowerCase();
}
function concatNewString()
{
"Concatenation : " + "Hello, ".concat(name);
}
function stringLength()
{
"Length : " + name.length;
}
function indexOfCharacters(){
var index = 0;
var result = "";
for(index; index < name.length; index++){
result = result + (name[index] + " = " +
name.indexOf(name[index], index) + ", ");
}
"Index Of : " + result;
}
</script>
<button onclick="toUpperCaseString()">Uppercase All</button>
<button onclick="toLowerCaseString()">Lowercase All</button>
<button onclick="concatNewString()">Prefix Hello</button>
<button onclick="stringLength()">String Length</button>
<button onclick="indexOfCharacters()">Index of All
Characters</button>
<br><br>
<h2 id="result"></h2>
</center>
</body>
</html>
Output :
Conclusion:
We understand that how implement Strings JavaScript.

of Teacher
Practical No. 6
Aim : Create a web page using form elements.
Resource Used :


System

8GB RAM

Package
Theory :
What is Form Tag?
▪ Form is typical layout on the web page by which a user can interact with the web
page.
▪ Typical components of forms are text, text area, checkboxes, radio buttons & push
buttons. These components of form are also called as form controls.
▪ HTML allows us to place these form components on the web page. All these form
contents in the <form> tag.
▪ The form has an attributes action which gets executed user clicks a button on the
form.
Uses of form:
1. Forms are used to collect the information from customer for online registration.
2. Forms are used for online survey.
3. Forms are used for conduction online examination.
4. The information present in the forms is submitted to the server for furtherprocessing.
Syntax:
<form name=“myform” action=“/myserverPage” method= “GET” target=“_blank”>
</form>
1. Text:
• Text is typically required to place one line text.

• This control is used for items that require only one line of user input is known as
Single- line text input controls.
• They are created using HTML <input> tag.
2. Textarea:
• This is used when the user is required to give details that may be longer than a
single sentence.
• Multi-line input controls are created using HTML <textarea> tag.
3. Button:
• There are various ways in HTML to create clickable buttons.

• We can also create a clickable button using <input>tag by setting its type
attribute to button.
Program Code :
<!DOCTYPE html>
<html>
<head>
<center>
<h2>Create a webpage using Form Elements</h2>
<br><br>
<script type='text/JavaScript'>
function emailValidate()
var a = document.loginForm.user.value;
var h5 = document.getElementById("email");
h5.innerHTML = a;
if(a == "ishrangari@gmail.com")
h5.innerHTML = "Correct Email ID";
return "ok";
else
h5.innerHTML = "InCorrect Email ID";
return "not ok";
function validate()
var res = emailValidate();
if(res == "ok")
var pass = document.loginForm.pass.value;
console.log(pass);
if(pass == "ishrangari@123")
{
alert("Login Success");
else
alert("Login UnSuccess");
</script>
</center>
</head>
<body>
<form name="loginForm" action="" method="POST" >
<fieldset>
<legend> Login Details </legend>
Username: <input type="text" name="user" onkeyup="emailValidate()" />
<h5 id="email"> </h5>
Password: <input type="text" name="pass"/><br><br>
<input type="submit" onclick="validate()" />
</fieldset>
</form>
</body>
</html>
Output :
Conclusion:
We understand that how to create a webpage using form elements in JavaScript.

of Teacher
Practical No. 7
Aim : Create a webpage to implement Form Events : Part I.
Resource Used :


System

8GB RAM

Package
Theory :
What is Form Event?
▪ Event is an activity that represent a change in the environment.

▪ A JavaScript event is an action that can be detected by JavaScript. Many of them are
initiated by user action but the browser generates some.
▪ Event is triggered & then it can be caught by JavaScript functions, which then do
something response.
▪ Event handler is a script that are executed in response to these events. Event handler
enables the web documents to respond the user activities through the browser
window.
▪ Event are specified in lowercase & these are case sensitive.
Form Event:
A form event is fired when a form control receive or loses focus or when the user
modify a form control value such as by typing text in a text input, select any option in
a select box etc. Here're some most important form events and their event handler.
1. The Change Event (onchange)
The change event occurs when a user changes the value of a form element.
You can handle the change event with the onchange event handler.
Program Code :
<!DOCTYPE html>
<html>
<head>
<center>
<h2>Create a webpage to implement Form Events : Part I</h2>
<br><br>
function highlight(ele)
{
ele.style.color = 'black';
ele.style.backgroundColor = 'cyan';
}
</script>
</center>
</head>
<body>
<form name="first">
<fieldset>
<legend> Login Details </legend>
Username: <input type="text" name="user" onchange="highlight(this)"/>
<br/><br/>
Password: <input type="password" name="pass"
onchange="highlight(this)"/>
<br/><br/>
<input type="submit" />
</fieldset>
</form>
</body>
</html>
Output :
Conclusion:
We understand that how to create a webpage using form events.

of Teacher
Practical No. 8
Aim : Create a webpage to implement Form Events : Part II.
Resource Used :


System

8GB RAM

Package
Program Code :
<!DOCTYPE html>
<html>
<head>
<center>
<h2>Create a webpage to implement Form Events : Part II</h2>
<br><br>
function updateList(ele)
{
with(document.forms.myform)
if(ele == 1)
list[0].text = "C";
list[0].value = 1;
list[1].text = "Python";
list[1].value = 2;
list[2].text = "C++";
list[2].value = 3;
else
list[0].text = "Oracle";
list[0].value = 1;
list[1].text = "MySql";
list[1].value = 2;
list[2].text = "DB2";
list[2].value = 3;
</script>
</center>
</head>
<body>
<center>
<form name="myform">
<select name="list">
<option value=1> C</option>
<option value=1> Python</option>
<option value=1>C++</optio>
</select>
<input type="radio" name="group1" value=1 checked="true"
onclick="updateList(this.value)">
Programming Languages
<input type="radio" name="group1" value=2

onclick="updateList(this.value)">
DataBases
</form>
</center>
</body>
</html>
Output :
Conclusion:
We understand that how to create a webpage using form events.

of Teacher
Practical No. 9
Aim : Develop a web page using Intrinsic java functions.
Resource Used :


System

8GB RAM

Package
Theory :
Intrinsic JavaScript Functions
• An intrinsic function (or built-in function) is a function (subroutine) available for

use in a given programming language whose implementation is handled specially
by the compiler.
• “Intrinsic” is the way some authors refer to what other authors call “built-in”.
• Those data types/objects/classes are always there regardless of what environment
you’re running in.
• JavaScript provides intrinsic (or “built-in”) objects. They are the Array, Boolean,
Date, Error, Function, Global, JSON, Math, Number, Object, RegExp, and
String objects.
• As you know JavaScript is an object oriented programming language, it supports
the concept of objects in the form of attributes.
• If an object attribute consists of function, then it is a method of that object, or if
an object attribute consists of values, then it is a property of that object.
Program Code :
<!DOCTYPE html>
<html>
<head>
<style>
img{
width:90px;
height:40px;
</style>
</head>
<body>
<center>
<h2>Develop a webpage using Intrinsic Java Functions</h2>
<br><br>
<form name="f">
First Name: <input type="text">
Last Name: <input type="text"><br><br>
<img src="Submit.jpg" onclick="javascript:document.forms.f.submit()"/>
<img src="Reset.jpg" onclick="javascript:document.forms.f.reset()"/>
</form>
</center>
</body>
</html>
Output :
Conclusion:
We understand that how to develop webpage using Intrinsic Java Function in
JavaScript.

of Teacher
Practical No. 10
Aim : Develop a web page for creating session and persistent cookies.
Observe the effect with browser cookies setting.
Resource Used :


System

8GB RAM

Package
Theory :
Cookies Basics
▪ A cookie is a small piece of information that a web site writes to user’s hard disk
when he visit the site.
▪ Cookies let you store user information in web pages.
▪ Cookies are data, stored in small text files, on your computer.
▪ When a web server has sent a web page to a browser, the connection is shut down,
and the server forgets everything about the user.
▪ Cookies were invented to solve the problem “how to remember information about the
user”:
▪ When a user visits a web page, his/her name can be stored in a cookie.
▪ Next time the user visits the page, the cookie “remembers” his/her name.
▪ A JavaScript can be used to create cookies whenever someone visits the web page that
contains the script.
▪ A JavaScript can also be used to read cookies stored on a user’s computer, and it uses
the information stored in a cookie to personalize the web page that a user visits.
▪ The text of a cookie must contain a name-value pair, which is a name and value of the
information.
▪ There are two types of Cookies:
o Session cookies
o Persistent cookies
1. Session Cookies
▪ Also also known as an in-memory cookie

▪ It resides in memory for the length of the browser session.
▪ A browser session begins when the user starts the browser and ends when
the user exits the browser.
▪ Even if the user surfs to another web site, the cookie remains in memory.
▪ Session cookie is automatically deleted when the user exits the browser
application.
2. Persistent Cookies
▪ Also known as transient cookie.

▪ A persistent cookie is a cookie that is assigned an expiration date.
▪ It is written to the computer’s hard disk and remains there until the
expiration date has been reached; then it’s deleted.
Program Code :
<html>
<head>
<script>
function create()
var cookies = document.getElementById("user").value;
document.cookie="username = "+cookies+";";
alert("Cookie Created"+document.cookie);
document.getElementById("user").value = "";
}
function read()
var x ;
if(document.cookie =="")
x="";
alert("Cookie Not Found");
else
x=document.cookie;
alert(" "+x);
function del()
if(document.cookie !="")
var d = new Date();
d.setTime(d.getTime()-(1000*60*60*24))
alert("Cookie Delete");
else
alert("First add cookie");

}
</script>
</head>
<body>
<center>
<h2>Develop a webpage for creating session and persistent cookies. Observe

the effect with
Browser Cookie Settings.</h2>
<br><br>
Enter Username : <input type="text" id="user">
<input type="button" onclick="create()" value="Create">
<input type="button" onclick="read()" value="Reading">
<input type="button" onclick="del()" value="Delete">
</center>
</body>
</html>
Output :
Conclusion:
We understand that how to create a cookies.

of Teacher
Thank_You

Client Side Scripting (CSS) (22519) Semester - V (CO) : A Laboratory Manual For

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Client Side Scripting (CSS) (22519) Semester - V (CO) : A Laboratory Manual For

Uploaded by

Copyright:

Available Formats

A Laboratory Manual

Client Side Scripting(CSS)

Board of Technical Education, Mumbai

Place : Gondia Enrollment No.: 2012420327

Course Teacher Head of the Department Principal

Date of Date Assessm Date

Sr Name of Broad Quantity Remarks

1. Operating Windows 10 64- bit 1

2. Hardware ASUS Laptop i3 10th generation 1

3. Software Notepad, Visual Studio, Chrome. 1

4. Microsoft Microsoft Word 1

▪ HTML stands for Hypertext markup language

▪ Javascript is a dynamic computer programming language.It is lightweight and

The script has takes two important attributes:

1. Document.write: This statement is used to display desired message on web browser.

1. Addition (+):-This operator is used to add two operands.

<h1>CSS : Practical No 1</h1>

<h2>Develop a JS Program with HTML for performing Arithmetic Operation

<script type= "text/javascript">

Marks Obtained Dated signature

Sr Name of Broad Quantity Remarks

1. Operating Windows 10 64- bit 1

2. Hardware ASUS Laptop i3 10th generation 1

3. Software Notepad, Visual Studio, Chrome. 1

4. Microsoft Microsoft Word 1

if...else if... statement:

Statement(s) to be executed if expression 1 is true

Statement(s) to be executed if expression 2 is true

Statement(s) to be executed if expression 3 is true

Statement(s) to be executed if no expression is true

<h1>CSS : Practical No 2</h1>

<h2>Develop a JS Program to use Decision Making and Looping

var result = prompt("Enter Marks");

if(result >= 98)

document.write(" <h1> College : IIT");

else if(result >= 95)

document.write(" <h1> College : COEP");

document.write(" <h1> College : VJTI");

document.write(" <h1> College : Other");

Marks Obtained Dated signature

Sr Name of Broad Quantity Remarks

1. Operating Windows 10 64- bit 1

2. Hardware ASUS Laptop i3 10th generation 1

3. Software Notepad, Visual Studio, Chrome. 1

4. Microsoft Microsoft Word 1

▪ JavaScript arrays are used to store multiple values in a single variable.

There are 2 ways to construct an array in JavaScript

2. By using an Array constructor (using new keyword)

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

• This declaration has five parts:

Syntax: var array_name = new Array();

<h1>CSS : Practical No 3</h1>

<h2>Develop a JavaScript to implement Array functionalities.</h2>

var arr = [13, 20, 7, 2, 1, 5, 8];

var sum=0, product = 1;

for(var i=0; i<arr.length; i++)

document.write("<h3>Array elements are " + arr + "<br />");

document.write("<h2>Sum : " + sum + "</h3>");

document.write("<h2>Product : " + product + "</h3>");

Marks Obtained Dated signature

Sr Name of Broad Quantity Remarks

1. Operating Windows 10 64- bit 1

2. Hardware ASUS Laptop i3 10th generation 1