Scribd
Upload
8K views

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

The document is a laboratory manual for a course titled "Client Side Scripting" for the 5th semester of a diploma in computer science and engineering. It contains instructions for practical assignments related to developing JavaScript programs. It includes a certificate verifying that the student completed the prescribed practical outcomes for the course satisfactorily. The content page lists 10 practical assignments covering JavaScript concepts like arithmetic expressions, decision making, loops, arrays, functions, strings, forms, cookies and more.

Uploaded by

Isha Rangari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8K views

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

The document is a laboratory manual for a course titled "Client Side Scripting" for the 5th semester of a diploma in computer science and engineering. It contains instructions for practical assignments related to developing JavaScript programs. It includes a certificate verifying that the student completed the prescribed practical outcomes for the course satisfactorily. The content page lists 10 practical assignments covering JavaScript concepts like arithmetic expressions, decision making, loops, arrays, functions, strings, forms, cookies and more.

Uploaded by

Isha Rangari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

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 <!--> and <--> 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 :

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 :

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

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

} else if (expression 3) {

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

} else {

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

Program Code :

<html>

<body>

<center>

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

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

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 3
Aim : Develop a JavaScript to implement Array functionalities.

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 :

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>

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

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

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 4
Aim : Develop a JavaScript Program to implement Functions.

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 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>
<h1>CSS : Practical No 4</h1>
<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.

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 5
Aim : Develop a JavaScript Program to implement Strings.

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 :

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>
<h1>CSS : Practical No 5</h1>
<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(){
document.getElementById("result").textContent =
"Lowercase : " + name.toLowerCase();
}
function concatNewString()
{
document.getElementById("result").textContent =
"Concatenation : " + "Hello, ".concat(name);
}
function stringLength()
{
document.getElementById("result").textContent =
"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) + ", ");
}
document.getElementById("result").textContent =
"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.

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 6

Aim : Create a web page using form elements.

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

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

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

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 7
Aim : Create a webpage to implement Form Events : Part I.

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 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>
<h1>CSS : Practical No 7</h1>
<h2>Create a webpage to implement Form Events : Part I</h2>
<br><br>
<script type='text/JavaScript'>
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.

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 8
Aim : Create a webpage to implement Form Events : Part II.

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

Program Code :

<!DOCTYPE html>

<html>

<head>

<center>

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

<h2>Create a webpage to implement Form Events : Part II</h2>

<br><br>

<script type='text/JavaScript'>

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.

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 9
Aim : Develop a web page using Intrinsic java functions.

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 :

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>

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

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

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)
Practical No. 10
Aim : Develop a web page for creating session and persistent cookies.
Observe the effect with browser cookies setting.

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 :

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>

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

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

Marks Obtained Dated signature


of Teacher
Process Product Total(50)
Related(15) Related(35)

Thank_You

You might also like