A Laboratory Manual for

Client Side Scripting Language

(22519)
Semester –V (CM)

Maharashtra State Board of Technical Education, Mumbai.

 Maharashtra State Board of Technical Education

Certificate

This is to certify that Mr./Ms. ………Aman Vijay Singh…..………………………………

Roll No 243122 of Third Semester of Diploma in Computer Technology of

Institute,…… Kala Vidya Mandir Institute of Technology ( Polytechnic ) …………

(Code 0571 ) has completed the term work satisfactorily in course

Client Side Scripting languages (22519) for the academic year 2024 to

2025 as Prescribed in the curriculum.

Place: ……Mumbai………… Enrollment No: …23111610024……..

Date: …………………………………. Exam. Seat No: …………………………

Subject Teacher Head of Department Principal

Seal of Institution
Program Outcomes (POs) to be achieved through Practical of this Course:-

PO 1.Basic knowledge: Apply knowledge of basic mathematics,

sciences and basic engineering to solve the broad-based Computer
engineering problem.

PO 2.Discipline knowledge: Apply Computer engineering discipline

- specific knowledge to solve core computer engineering related
problems.

PO 3.Experiments and practice: Plan to perform experiments and

practices to use the results to solve broad-based Computer
engineering problems.

PO 4.Engineering tools: Apply relevant Computer technologies and

tools with an understanding of the limitations.

PO 5.The engineer and society: Assess societal, health, safety, legal and
cultural issues and the consequent responsibilities relevant to practice in
field of Computer engineering.

PO 6.Environment and sustainability: Apply Computer engineering

solutions also for sustainable development practices in societal and
environmental contexts and demonstrate the knowledge and need for
sustainable development.

PO 7. Ethics: Apply ethical principles for commitment to professional

ethics, responsibilities and norms of the practice also in the field of
Computer engineering.

PO 8.Individual and team work: Function effectively as a leader and team

member in diverse/ multidisciplinary teams.

PO 9.Communication: Communicate effectively in oral and written form.

PO 10.Life-long learning: Engage in independent and life-long learning

activities in the context of technological changes in the Computer
engineering field and allied industry.
 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
12
form 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
 Introduction to java script

What is JavaScript?

 It is designed to add interactivity to HTML pages

 It is a scripting language (a lightweight programming language)

 It is an interpreted language (it executes without preliminary

compilation)

 Usually embedded directly into HTML pages

 And, Java and JavaScript are different

What can a JavaScript Do?

 JavaScript gives HTML designers a programming tool: o simple syntax

 JavaScript can put dynamic text into an HTML page

 JavaScript can react to events

 JavaScript can read and write HTML elements

 JavaScript can be used to validate data

 JavaScript can be used to detect the visitor’s browser

 JavaScript can be used to create cookies o Store and retrieve

information on the visitor’s computer
Pratical No 1: Write simple JavaScript with HTML for
arithmetic expression evaluation and message printing.

<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations</title>
</head>
<body bgcolor="yellow">
<script language="javascript"> var a = 36;
var b = 46;

var addition = a + b; var subtraction = a - b;

var multiplication = a * b; var division = a / b;
document.write("Addition (a + b) is: " + addition + "<br>");
document.write("Subtraction (a - b) is: " + subtraction + <br>");
document.write("Multiplication (a * b) is: " + multiplication +
<br>");
document.write("Division (a / b) is: " + division + "<br>");
</script>
</body>
</html>
OUTPUT :

Marks Obtained Dated Signed of

teacher

Process Product Total(50)

Related(35) Related(15)
Pratical No 2 : Develop JavaScript to use decision making
and looping statements.

What is Decision Making Statement ?

Conditional Statements: (Decision Making)

1. The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a
condition is true.

Syntax
if (condition) {
// block of code to be executed if the condition is true
}

2. The else Statement

Use the else statement to specify a block of code to be executed if the
condition is false.

Syntax
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

3. The else if Statement

Use the else if statement to specify a new condition if the first condition is
false.

Syntax if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
Example :

<!DOCTYPE html>
<html>
<head>
<title>Weeks of Days</title>
</head>
<body bgcolor="Blue">
<h1>Use of Decision-Making Statement</h1>
<script type="text/javascript"> var day = 3;
switch (day) { case 1:
alert("Sunday"); break;
case 2:
alert("Monday"); break;
case 3:
alert("Tuesday"); break;
case 4:
alert("Wednesday"); break;
case 5:
alert("Thursday"); break;
case 6:
alert("Friday"); break;
case 7:
alert("Saturday");
break; default:
alert("Invalid day"); break;
}
</script>
</body>
</html>
OUTPUT :

After Clicking On Ok:

Looping Statement:
1. for loop
Loops are handy, if you want to run the same code over and over
again, each time with a different value.
Syntax:-
for (initialization condition; testing condition; increment/decrement)
{
statement(s)
}
Or for objects for (variableName in Object)
{
statement(s)
}

2. do while: do while loop is similar to while loop with only difference that
it checks for condition after executing the statements, and therefore is
an example of Exit Control Loop.
Syntax:
do
{
statements.. }while (condition);

3. While loop
A while loop is a control flow statement that allows code to be executed
repeatedly based on a given Boolean condition. The while loop can be thought
of as a repeating if statement.
Syntax :
while (boolean condition)
{
loop statements...
}

Example :
<!DOCTYPE html>
<html>
<head>
<title>Prime or Not</title>
</head>
<body>
<script type="text/javascript">
var num = prompt("Enter a number");
var isPrime = true;
if (num <= 1) {
isP
} else {
for (var i = 2; i < num; i++) {
if (num % i == 0) {
isPrime = false;
break;
}
}
}
if (isPrime) {
alert(num + " is prime");
} else {
alert(num + " is not prime");
}
</script>
</body>
</html>

OUTPUT:
If we enter 5

If we enter 4

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)
Practical No 3: Develop JavaScript to implements Array
functionalities

Array
What is an Array?
An array is a special variable, which can hold more than one value at a time.

Creating an Array
Using an array literal is the easiest way to create a JavaScript Array. Syntax: var
array_name = [item1, item2, ...];

JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

var arrayname=new Array();

Methods in Array

PUSH ():
The push () method is use to create a new element at the end of the array

POP ():
This method returns and removes the last element of the array

PUSH () Method :

Example:

<!DOCTYPE html>
<html>
<head>
<title>Push Method</title>
</head>
<body>
<script type="text/javascript"> var a = [];
a[0] = 10;
a[1] = 20;
a[2] = 30;
a[3] = 40;
a[4] = 50;

document.write("<h4>The elements of the array: </h4>"); for (var i = 0; i <

a.length; i++) {
document.write(a[i] + " ");
}

document.write("<h3>Calling push() method</h3>"); a.push(60);

document.write("<h4>The array after using push(): </h4>"); for (i = 0; i <

a.length; i++) {
document.write(a[i] + " ");
}
</script>
</body>
</html>

OUTPUT :
POP Method :

Example:

<!DOCTYPE html>
<html>
<head>
<title>Pop Method</title>
</head>
<body>
<script
type="text/javascript"
> var a = [];
a[0] = 10;
a[1] = 20;
a[2] = 30;
a[3] = 40;
a[4] = 50;

document.write("<h3>The elements of the

array:</h3>"); for (var i = 0; i < a.length; i++) {
document.write(a[i] + " ");
}

document.write("<h4>Calling pop()
method</h4>"); var poppedElement =
a.pop();
document.write("<p>Popped element: " + poppedElement + "</p>");

document.write("<h5>The elements in the array are

now:</h5>"); for (var i = 0; i < a.length; i++) {
document.write(a[i] + " ");
}
</script>
</body>
</html>
OUTPUT :

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)
Practical No 4 : Develop javascript to implement functions

Function

• JavaScript functions are used to perform operations.

• We can call JavaScript function many times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.
1. Code reusability: We can call a function several times so it save coding.
2. Less coding: It makes our program compact. We don’t need to write
many lines of code each time to perform a common task.

Function Can be Call in two ways :

1. Calling a Function with Arguments

2. Calling a function without arguments

1. Calling a Function with Arguments

<!DOCTYPE html>
<html>
<head>
<title>Calling Function with Arguments</title>
<script type="text/javascript"> function add(a, b) {
var c = a + b; document.write("Addition = " + c);

}
</script>
</head>
<body>
<h4>Passing Arguments to the Function</h4>
<script type="text/javascript"> var x = 10;
var y = 20; add(x, y);
</script>
</body>
</html>

OUTPUT:

2. Calling Function without arguments

<!DOCTYPE html>
<html>
<head>
<title>Calling Function without Arguments</title>
<script type="text/javascript"> function add() {
var a = 10; var b = 20; var c = a + b;
document.write("addition=" + c); // Use document.write to display output on
the web page
}
</script>
</head>
<body>
<h4>Passing Arguments to the Function</h4>
<script type="text/javascript"> add();
</script>
</body>
</html>
OUTPUT:

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)
Practical 5- Develop JavaScript to implements Strings

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`;
• Backticks, allow us to embed any expression into the string, by wrapping
it in ${…}: function product(x, y) {
return x * y;
}alert(`4 + 6 = ${product(4, 6)}.`); // 4 * 6 = 24
• Strings also can be created by using String’s fromCharCode() method.
String.fromCharCode(104,101,108,108,111) // "hello"
• String can also be created using String Object constructor along with
new keyword var objString = new String("I am a String object");

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.lastIndexOf(substr, [pos]) : Returns the index of the last occurrence of
a specified text in a string.
5. str.includes(substr, pos) : Determines whether substr is found in given
string, returns either true or false.
6. str.startsWith(searchbstr) : Determines whether a string begins with the
characters of a specified string. Returns true or false depending on result.Client
Side Scripting Languages (22519) Maharashtra State board of Education
7. str.endsWith(searchstr) : Determines whether a string ends with the
characters of a specified string. Returns true or false depending on result.
8. str.slice(start [, end]) : Extracts a part of a string from start to end (not
including end) and returns the extracted part in a new string. If a parameter is
negative, the position is counted from the end of the string. If you omit the
second parameter, the method will
slice out the rest of the string
9. str.substring(start [, end]) : Similar to slice(), extracts a part of a string
between start and end. It cannot accept negative indexes and it allows start to
be greater than end. Negative values mean 0
10. str.substr(start [, length]) : Similar to slice(), extracts a part of a string the
from start get length characters. If you omit the second parameter, substr()
will slice out the rest of the string.
11. str.trim() : Removes spaces from the beginning and end of the string.
12. str.search(searchstr) : Searches a string for a specified string and returns
the position of the match.
13. str.replace(to, with) : Replaces a specified value with another value in a
string.
14. str.concat(string) : Joins two or more strings. This method can be used
instead of the plus operator.
15. str.charAt(index) : Returns the character at a specified index (position) in
a string
16. str.charCodeAt(index) : Returns the Unicode of the character at a
specified index in a string. This method returns a UTF-16 code (an integer
between 0 and 65535)
17. str.split(seperator) : Splits a string into sub strings array. If the separator
is “” (blank or not given), the returned array will be an array of single
characters.

1. Develop a program to change the case of string.

<!DOCTYPE html>
<html>
<head>
<title>Upper and lower case </title>
<script type=”text/javascript”> function toUpper() {
var text = document.getElementById('panel').innerHTML
document.getElementById('panel').innerHTML = text.toUpperCase()
}
function toLower() {
var text = document.getElementById('panel').innerHTML
document.getElementById('panel').innerHTML = text.toLowerCase()
}
</script>
</head>
<body>
<p id="panel">Click on button to change case.</p>
<input type="button" value="UPPERCASE" onclick="toUpper()" />
<input type="button" value="lowercase" onclick="toLower()" />
</body>
</html>

OUTPUT:

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)
Practical 6- Create web page using Form Elements
HTML Form
• HTML Form is a document which stores information entered by user on
a web server using interactive controls.
• It contains different kind of information such as username, password,
contact number, email id etc.
• HTML form uses elements like input box, radio buttons, check box,
submit buttons etc.
• Using these elements the information of an user is submitted on a web
server
• HTML Forms are required, when you want to collect some data from the
site visitor.
• For example, during user registration you would like to collect
information such as name, email address, credit card, etc.
• The HTML <form> tag is used to create an HTML form and it has
following syntax
<form action = "Script URL" method = "GET|POST"> form elements like input,
textarea etc.
</form>

Example of HTML form

<!DOCTYPE html>
<html>
<head><title> username </title></head>
<body>
<form> Username: <br>
<input type="text" name="username"><br> Password: <br>
<input type="password" name="password"><br>
<input type="submit" value="Submit"><br>
</form>
</body>
</html>

OUTPUT:
HTML <form> Attributes

1. action : Backend script ready to process your passed data.

2. method : Method to be used to upload data. The most frequently used
are GET and POST methods.
3. target : Specify the target window or frame where the result of the script
will be displayed. It takes values like _blank, _self, _parent etc.
4. enctype : You can use the enctype attribute to specify how the browser
encodes the data before it sends it to the server.

The <input> Element

• The <input> element is the most important form element.
• The <input> element can be displayed in several ways, depending on the
type attribute.
• There are different types of form controls that you can use to collect
data using HTML form −
1. Text Input Controls
2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls
5. File Select boxes
6. Hidden Controls
7. Clickable Buttons
8. Submit and Reset Button
<input type=“text”> : Defines a one-line text input field
<input type=“password”> : Defines a one-line password input field
<input type=“radio”> : Defines a radio button (for selecting one of many
choices)
<input type=“checkbox”> : Defines checkboxes which allow select multiple
options form
<input type=“submit”> : Defines a submit button (for submitting the form)
<input type=“reset”> : Defines a reset button to reset all values in the form
<input type=“button”> : Defines a simple push button, which can be
programmed to perform a task on an event
<input type=“file”> : Defines to select the file from device storage
<input type=“image”> : Defines a graphical submit button
<input type=“date”> : Defines an input field for selection of date
<input type=“datetime-local”> : Defines an input field for entering a date
without time zone
<input type=“email”> : Defines an input field for entering an email address
<input type=“number”> : Defines an input field to enter a number
<input type=“tel”> : Defines an input field for entering the telephone number
<input type=“submit”> : Defines a submit button (for submitting the form)
<input type=“reset”> : Defines a reset button to reset all values in the form
<input type=“button”> : Defines a simple push button, which can be
programmed to perform a task on an event
<input type=“file”> : Defines to select the file from device storage
<input type=“image”> : Defines a graphical submit button
<input type=“date”> : Defines an input field for selection of date
<input type=“datetime-local”> : Defines an input field for entering a date
without time zone
<input type=“email”> : Defines an input field for entering an email address
<input type=“number”> : Defines an input field to enter a number
<input type=“tel”> : Defines an input field for entering the telephone number
 1. Create a HTML web page for User Registration Form

<!DOCTYPE html>
<html>
<head>
<title>web user registration </title>
<style> input[type="text"], input[type="password"], select {
border: 1px solid red; border-radius: 5px; padding: 5px; margin: 5px;
}form {
background-color: #f1f1f1; width: 40%;
padding: 20px;
}input[type="submit"] { border-radius: 5px; padding: 5px;
margin: 5px;
background-color: green; color: white;
font-size: 14;
} input[type="reset"] { border-radius: 5px;
padding: 5px; margin: 5px;
background-color: red;

color: white; font-size: 14;

}
</style>
<script type=”text/javascript”>function input(e) { e.style.backgroundColor =
"yellow";
}
function reset1(e) { e.style.backgroundColor = "white";
}
function fullName() {
var f = document.getElementById("fname").value; var m =
document.getElementById("mname").value; var l =
document.getElementById("lname").value;
document.getElementById("sname").value = f + " " + m + " " + l;
}
</script>
</head>
<body>
<center>
<form>
<h1>Registration Form</h1>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="fname" placeholder="Enter first name"
onclick="input(this)"
onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="mname" placeholder="Enter middle name"
onclick="input(this)"
onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="lname" placeholder="Enter last name"
onclick="input(this)" onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>

<td>Full Name</td>
<td><input type="text" id="sname" /></td>
</tr>
<tr>
<td>Date of Birth</td>
<td>
<select name="date">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select><select name="month">
<option>01</option>
<option>02</option>
<option>03</option>

<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select><select name="year">
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
</select>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="Male">Male</input>

<input type="radio" name="gender" value="Female">Female</input>

</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="country">
<option selected>India</option>
<option>US</option>
<option>UK</option>
</select>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password1" />
</td>
</tr>
<tr>
<td>Comfirm Password</td>
<td>
<input type="password" name="password2" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>

OUTPUT:
 Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical 7- Create web page to implements Form Events.
Part I

HTML Form Events

• When JavaScript is used in HTML pages, JavaScript can “react” on these
events.
• An HTML event can be something the browser does, or something a user
does.
• The simple example of an event is a user clicking the mouse or pressing a
key on the keyboard.
• Some examples of HTML events:
An HTML web page has finished loading An HTML input field was changed
An HTML button was clicked
• When events happen, we may want to do something. JavaScript lets
execute code when events are detected.

Example of HTML Form Event

<!DOCTYPE html>
<html>
<head>
<title>Form </title>
<script type="text/javascript"> function sayHello() { alert("Hello World!")
}
</script>
</head>
<body>
<p>Click the button to see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>

OUTPUT:
Common HTML Events :
 onchange : An HTML element has been changed
 onclick : The user clicks an HTML element
 onmouseover : The user moves the mouse over an HTML element
 onmouseout : The user moves the mouse away from an HTML element
 onkeydown : The user pushes a keyboard key
 onload : The browser has finished loading the page

1. Write program to add click, mouseover and mouseout events

to webpage using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>mouse event</title>
</head>
<body>
<button id="btn">Click here</button>
<p id="para" onmouseover="mouseOver()" onmouseout="mouseOut()">Hover
over this Text
!</p>
<b id="output"></b>
<script type=”text/javascript”>
var x = document.getElementById("btn");x.addEventListener("click",
btnClick);function mouseOver() {
document.getElementById("output").innerHTML += "MouseOver Event" +
"<br>";
}function mouseOut() {
document.getElementById("output").innerHTML += "MouseOut Event" +
"<br>";
}function btnClick() {
document.getElementById("output").innerHTML += "Click Event" + "<br>";
}
</script>
</body>
</html>

OUTPUT:

2. Write HTML Script that displays three radio buttons red,

green, blue. Write proper JavaScript such that when the user
clicks on radio button the background color of webpage will
get change accordingly.

<!DOCTYPE html>
<html>
<head>
<title> radiobutton </title>
<script type=”text/javascript”>
function changeColor(color)
{
var panel = document.getElementById('panel')
document.body.style.backgroundColor = color
panel.innerHTML = "Background color is set to: " + color.toUpperCase()
}
</script>
</head>
<body onload="changeColor('red')">
<p>Select option to change background color of page</p>
<form name="myform">
<input type="radio" name="color" value="red"
onchange="changeColor(this.value)" checked="false">RED<br />
<input type="radio" name="color" value="green"
onchange="changeColor(this.value)">GREEN<br />
<input type="radio" name="color" value="blue"
onchange="changeColor(this.value)">BLUE<br />
</form>
<p id="panel"></p>
</body>
</html>
OUTPUT :
 Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical 8- Create web page to implements Form Events.
Part II
Mouse Events
• Mouse events are used to capture the interactions made by user using
mouse.
• Such events may come not only from “mouse devices”, but are also from
other devices, such as phones and tablets.

Mouse Event Types

• mousedown/mouseup : Mouse button is clicked/released over an
element.
• mouseover/mouseout : Mouse pointer comes over/out from an
element.
• mousemove : Every mouse move over an element triggers that event.
• click : Triggers after mousedown and then mouseup over the same
element if the left mouse button was used.
• dblclick : Triggers after two clicks on the same element within a short
timeframe. Rarely used nowadays.
• contextmenu : Triggers when the right mouse button is pressed. There
are other ways to open a context menu, e.g. using a special keyboard key, it
triggers in that case also, so
it’s not exactly the mouse event.

Example of Mouse Events

<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<script type=”text/javascript”> function init()
{
var panel = document.getElementById('panel') var btn =
document.getElementById('btn') btn.addEventListener("dblclick", dblClick)
btn.addEventListener("mousedown", mouseDown)
btn.addEventListener("mouseup", mouseUp)
btn.addEventListener("mouseover", mouseOver)
btn.addEventListener("mouseout", mouseOut)
}
function click()
{
panel.innerHTML += "Mouse clicked<br/>"
}
function dblClick()
{
panel.innerHTML += "Mouse double clicked<br/>"
}
function mouseDown()
{
panel.innerHTML += "Mouse down<br/>"
}
function mouseUp()
{
panel.innerHTML += "Mouse up<br/>"
}
function mouseOver()
{
panel.innerHTML += "Mouse over<br/>"
}
function mouseOut()
{
panel.innerHTML += "Mouse out<br/>"
}
function mouseMove()
{
panel.innerHTML += "Mouse moved<br/>"
}
</script>
</head>
<body onload="init()">
<input type="button" id="btn" value="Click Me" onclick="click()"
onmousemove="mouseMove"/>
<h3>Mouse events performed are</h3>
<p id="panel"></p>
</body>
</html>

OUTPUT :
Key Events
• The keyboard events are the events that occur when the user interacts
using the keyboard.
• The keydown events happens when a key is pressed down, and then
keyup when it’s released.
• The event.key property of the event object allows to get the character ,
while the event.code property of the event object allows to get the “physical
key code”.
• For instance, the same key Z can be pressed with or without Shift. That
gives us two different characters: lowercase z and uppercase Z.
• The event.key is exactly the character, and it will be different.

Key Event Types

• onkeydown : When user presses the key on the keyboard (this happens
first).
• onkeypress : The user presses a key (this happens after onkeydown)
• onkeyup : The user releases a key that was down (this happens last)

Example of KeyEvents :
<!DOCTYPE html>
<html>
<head>
<title>Key Events</title>
<script type =“text/javascript”> function init()
{
var panel = document.getElementById('panel')
document.addEventListener("keydown", keydown)
document.addEventListener("keypress", keypress)
document.addEventListener("keyup", keyup)
}
function keydown()
{
panel.innerHTML = "Key down<br/>"
}
function keypress(e)
{
var c = (window.event) ? e.keyCode : e.which panel.innerHTML += "Key
pressed: " + String.fromCharCode(c)
}
function keyup()
{
panel.innerHTML += "<br/>Key up"
}
</script>
</head>
<body onload="init()">
<p id="panel"></p>
</body>
</html>

OUTPUT :
 1. Develop a JavaScript program for working with form events.

<!DOCTYPE html>
<html>
<head>
<title>Example: Working with form Events</title>
<style type="text/javascript"> p {
font-family: Verdana; background: #FA8B7C; color: #fff;
padding: 10px;
border: 4px solid #555;
}
</style>
</head>
<body>
<form>
<p>
<label for="name"> Name:
<input autofocus id="name" name="name" /></label>
</p>
<p>Client Side Scripting
Languages (22519)
Maharashtra State board of
Education
<label for="nick"> Nickname:
<input id="nick" name="nick" /></label>
</p><button type="submit">Submit</button>
</form><span id="output"></span></body><script>
var items =
document.getElementsByTagName("input")
; for (var i = 0; i < items.length; i++) {
items[i].onkeyup = keyboardEventHandler;
}function keyboardEventHandler(e) {
document.getElementById("output").innerHTML = "Key
pressed is: " + e.keyCode + " Char:" +
String.fromCharCode(e.keyCode);
}
</script>
</html>

OUTPUT:
 Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical 9- Develop a webpage using intrinsic java functions
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.
• For example,
var status = document.readyState;

readyState is a property of the document object which can contain values such
as “unintialized”, ”loading”, ”interactive”, ”complete” whereas,

document.write("Hello World");
write() is a method of the document object that writes the content “Hello
World” on the web page.
• JavaScript Built-in objects such as
 Number
 String
 RegExp
 Array
 Math
 Date
 Boolean

• Each of the above objects hold several built-in functions to perform

object related functionality.
isNaN()
• isNaN() method determines whether value of a variable is a legal
number or not.
• For example document.write(isNan(0)); // false
document.write(isNan('JavaScript')); // true

eval()
• eval() is used to execute Javascript source code.
• It evaluates or executes the argument passed to it and generates output.
• For example
eval("var number=2;number=number+2;document.write(number)"); //4

Number()
• Number() method takes an object as an argument and converts it to the
corresponding number value.
• Return Nan (Not a Number) if the object passed cannot be converted to
a number
• For example
var obj1=new String("123"); var obj2=new Boolean("false"); var obj3=new
Boolean("true"); var obj4=new Date();
var obj5=new String("9191 9999");document.write(Number(obj1)); // 123
document.write(Number(obj2)); // 0
document.write(Number(obj3)); // 1
document.write(Number(obj4)); // 1342720050291
document.write(Number(obj5)); // NaN

String()
• String() function converts the object argument passed to it to a string
value.
• For example
document.write(new Boolean(0)); // false document.write(new Boolean(1)); //
true
document.write(new Date()); // Tue Jan 05 2021 13:28:00 GMT+0530

parseInt()
• parseInt() function takes string as a parameter and converts it to integer.
• For example

document.write(parseInt("45")); // 45 document.write(parseInt("85 days")); //

85 document.write(parseInt("this is 9")); // NaN
• An optional radix parameter can also be used to specify the number
system to be used to parse the string argument.
• For example, document.write(parseInt(“10”,16)); //16

parseFloat()
• parseFloat() function takes a string as parameter and parses it to a
floating point number.
• For example document.write(parseFloat("15.26")); // 15.26
document.write(parseFloat("15 48 65")); // 15
document.write(parseFloat("this is 29")); // NaN document.write(pareFloat("
54 ")); // 54

1. An intrinsic function is often used to replace the Submit button and the
Reset button with your own graphical images, which are displayed on a
form in place of these buttons.

<!DOCTYPE html>
<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:
 1. Write a JavaScript function to insert a string within a string at a
particular position (default is 1).

<!DOCTYPE html>
<html>
<head>
<title>Insert a string within a specific position in another string</title>
</head><body>
<script type=”text/javascript”>
function insert(main_string,
ins_string, pos) { if(typeof(pos)
== "undefined") {
pos = 0;
}
if(typeof(ins_string) ==
"undefined") {
ins_string = '';
}
return main_string.slice(0, pos) +
ins_string +
main_string.slice(pos);}
 var main_string = "Welcome to JavaScript";
var ins_string = " the world of ";Client Side Scripting Languages (22519)
Maharashtra State board of Education
var pos = 10;
var final_string = insert(main_string, ins_string, pos);
document.write("Main String: <b>" + main_string + "</b><br/>");
document.write("String to insert: <b>" + ins_string
+ "</b><br/>"); document.write("Position of
string: <b>" + pos + "</b><br/>");
document.write("Final string: <b>" + final_string +
"</b>");
</script>
</body>
</html>

OUTPUT:

Marks Obtained Dated Signed of

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

What are Cookies?

A cookie is a piece of data that is stored on your computer to be accessed by
your browser. You also
might have enjoyed the benefits of cookies knowingly or unknowingly.Cookies
are data, stored in small
text files, on your computer.

How It Works ?
Your server sends some data to the visitor's browser in the form of a cookie.
The browser may accept
the cookie. If it does, it is stored as a plain text record on the visitor's hard
drive. Now, when the visitor
arrives at another page on your site, the browser sends the same cookie to the
server for retrieval.
Once retrieved, your server knows/remembers what was stored earlier.
Cookies are a plain text data record of 5 variable-length fields −

• Expires − The date the cookie will expire. If this is blank, the cookie will
expire when the visitor quits the browser.

• Domain − The domain name of your site.

• Path − The path to the directory or web page that set the cookie. This
may be blank if you want to retrieve the cookie from any directory or page.

• Secure − If this field contains the word "secure", then the cookie may
only be retrieved with a secure server. If this field is blank, no such restriction
exists.

• Name=Value − Cookies are set and retrieved in the form of key-value

pairs

Create a Cookie with JavaScript

You can create cookies using document.cookie property. document.cookie =
"cookiename=cookievalue"
You can even add expiry date to your cookie so that the particular cookie will
be removed from the computer on the specified date. The expiry date should
be set in the UTC/GMT format. If you do not set the expiry date, the cookie will
be removed when the user closes the browser.
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014
20:00:00 UTC"

Storing Cookies
The simplest way to create a cookie is to assign a string value to the
document.cookie object, which
looks like this.
document.cookie = "key1 = value1;key2 = value2;expires = date";

Note − Cookie values may not include semicolons, commas, or whitespace. For
this reason, you may want to use the JavaScript escape() function to encode
the value before storing it in the cookie. If you do this, you will also have to use
the corresponding unescape() function when you read the cookie value.

Example
<!DOCTYPE html>
<html>
<head>
<title>cookie</title>
<script type = "text/javascript"> functionWriteCookie()
{ 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:

Read a Cookie with JavaScript

You can access the cookie like this which will return all the cookies saved for
the current domain var x = document.cookie
Reading a cookie is just as simple as writing one, because the value of the
document.cookie object is the cookie. So you can use this string whenever you
want to access the cookie. The document.cookie string will keep a list of
name=value pairs separated by semicolons, where name is the name of a
cookie and value is its string value.You can use strings' split() function to break
a string into key and values

Example
<!DOCTYPE html>
<html>
<head>
<title>cookie 1</title>
<script type = "text/javascript"> functionReadCookie()
{ varallcookies = document.cookie;

document.write ("All Cookies : " + allcookies );

// Get all the cookies pairs in an array cookiearray = allcookies.split(';');
// Now take key value pair out of this array for(var i=0; i<cookiearray.length;
i++) {
name = cookiearray[i].split('=')[0]; value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>

OUTPUT:
Setting Cookies Expiry Date
You can extend the life of a cookie beyond the current browser session by
setting an expiration date and saving the expiry date within the cookie. This
can be done by setting the ‘expires’ attribute to a date and time.

Example

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript"> functionWriteCookie() {
var now = new Date(); now.setMonth(now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue; document.cookie = "expires=" +

now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>

OUTPUT:

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)
Practical No.11.Develop a webpage for placing the window
on the screen and working with child window.
Window Object

The window object represents an open window in a browser. If a document

contain frames (< iframe > tags), the browser creates one window object for
the HTML document, and one additional window object for each frame.

Window open() Method

The open() method opens a new browser window, or a new tab, depending on
your browser settings and the parameter values.

Syntax
window.open(URL, name, specs, replace)

Parameter Description
URL Optional. Specifies the URL of the page to open. If no URL is
specified, a new window/tab with about:blank is opened
name Optional. Specifies the target attribute or the name of the
window. The following values are supported:
_blank - URL is loaded into a new window, or tab. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded name -
The name of the window
specs Optional. A comma-separated list of items, no whitespaces. The
following values are supported: channelmode=yes|no|1|0 Whether
or not to display the window in theater mode. Default is no. IE
only
directories=yes|no|1|0 Obsolete. Whether or not to add directory buttons.
Default is yes. IE
only
fullscreen=yes|no|1|0 Whether or not to display the browser in full-
screen mode. Default is no. A window in full-screen
mode must also be in theater mode. IE only
height=pixels The height of the window. Min. value is 100
 left=pixels The left position of the window.
Negative values not allowed
location=yes|no|1|0 Whether or not to display the
address field. Opera only
menubar=yes|no|1|0 Whether or not to display the menu
bar resizable=yes|no|1|0 Whether or not the window is
resizable. IE only
scrollbars=yes|no|1|0 Whether or not to display scroll bars.
IE, Firefox & Opera only
status=yes|no|1|0 Whether or not to add a status bar
titlebar=yes|no|1|0 Whether or not to display the title
bar. Ignored unless the calling
application is an HTML Application or a trusted dialog box
toolbar=yes|no|1|0 Whether or not to display the
browser toolbar. IE and Firefox only
top=pixels The top position of the window.
Negative values not allowed
width=pixels The width of the window. Min. value
is 100

replace Optional. Specifies whether the URL creates a new entry or replaces
the current entry in the history list. The following values are supported:
true - URL replaces the current document in the history list false - URL creates
a new entry in the history list

Example:
<!DOCTYPE html>
<html>
<head><title>new browser</title>
<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:

Window.close()
This method is used to close the window which are opened by window.open()
method.
Syntax
window.close()
Window print() Method
The print() method prints the contents of the current window.The print()
method opens the Print Dialog Box, which lets the user to select preferred
printing options.
window.print();
• The resizeBy() method resizes a window by the specified amount,
relative to its current size. Syntax:
resizeBy(width, height)
• The moveBy() method moves a window a specified number of pixels
relative to its current coordinates.
Syntax:
window.moveBy(x, y)
• The resizeTo() method resizes a window to the specified width and
height. Syntax:
window.resizeTo(width, height)
• The scrollBy() method scrolls the document by the specified number of
pixels. Syntax window.scrollBy(xnum,
ynum)

• The setInterval() method calls a function or evaluates an expression at

specified intervals (in milliseconds).The setInterval() method will continue
calling the function until clearInterval() is called, or the window is closed.The ID
value returned by setInterval() is used as the parameter for the clearInterval()
method.
Tip: 1000 ms = 1 second.
Tip: To execute a function only once, after a specified number of milliseconds,
use the setTimeout() method.
Syntax:
setInterval(function, milliseconds, param1, param2, ...)
Parameter Description
function Required. The function that will be executed
milliseconds Required. The intervals (in milliseconds) on how often to execute
the code. If the value is less than 10, the value 10 is used
param1, param2, ... Optional. Additional parameters to pass to the
function

• The setTimeout() method calls a function or evaluates an expression

after a specified number of milliseconds.
Syntax:
setTimeout(function, milliseconds, param1, param2, ...) Parameter Values
Parameter Description
function Required. The function that will be executed
milliseconds Optional. The number of milliseconds to wait before executing the
code. If omitted, the value 0 is used
param1, param2, ... Optional. Additional parameters to pass to the
function
Example
<!DOCTYPE html>
<html>
<head><title>child window</title>
<body>
<p>Click the button to open a new window and close the window after three
seconds (3000 milliseconds)</p>
<button onclick="openWin()">Open "myWindow"</button>
<script>
function openWin() {
var myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
setTimeout(function(){ myWindow.close() }, 3000);
}
</script>
</body>
</html>

OUTPUT:

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)
Practical No.12. Develop a web page for validation of form
fields using regular expressions.
JavaScript Regular Expression
A regular expression is a sequence of characters that forms a search pattern.
The search pattern can be used for text search and text replaces operations.

What Is a Regular Expression?

A regular expression is a sequence of characters that forms a search pattern.
When you search for data in a text, you can use this search pattern to describe
what you are searching for.
A regular expression can be a single character, or a more complicated pattern.
Regular expressions can be used to perform all types of text search and text
replace operations.

Syntax
/pattern/modifiers;

Example
var patt = /w3schools/i; Example explained:
/w3schools/i is a regular expression. w3schools is a pattern (to be used in a
search).
i is a modifier (modifies the search to be case-insensitive).

Using String Methods

In JavaScript, regular expressions are often used with the two string methods:
search() and replace().
The search() method :
uses an expression to search for a match, and returns the position of the
match.
The replace() method
returns a modified string where the pattern is replaced.

Using String search() With a String

The search() method searches a string for a specified value and returns the
position of the match:

Example
Use a string to do a search for "W3schools" in a string: var str = "Visit
W3Schools!";
var n = str.search("W3Schools");
Example

Use a regular expression to do a case-insensitive search for "w3schools" in a

string: var str = "Visit W3Schools";
var n = str.search(/w3schools/i); The result in n will be:
6

Using String replace() With a String

The replace() method replaces a specified value with another value in a string:
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3Schools");

Use String replace() With a Regular Expression

Example
Use a case insensitive regular expression to replace Microsoft with W3Schools
in a string: var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools"); The result in res will be:
Visit W3Schools!

Regular Expression Modifiers

Modifiers can be used to perform case-insensitive more global searches:
Modifier Description
i Perform case-insensitive matching
g Perform a global match (find all matches rather than stopping after the
first match)
m Perform multiline matching

Regular Expression Patterns

Brackets are used to find a range of characters:
Expression Description
[abc] Find any of the characters between the brackets [^abc] Find any
character NOT between the brackets [0-9] Find any of the digits between the
brackets
[^0-9] Find any character NOT between the brackets (any non-digit) (x|y)
Find any of the alternatives separated with |

Meta characters are characters with a special meaning:

. Find a single character, except newline or line terminator
\w Find a word character
\W Find a non-word character
\d Find a digit
\D Find a non-digit character
\s Find a whitespace character
\S Find a non-whitespace character
\b Find a match at the beginning/end of a word, beginning like this: \bHI,
end like this: HI\b
\B Find a match, but not at the beginning/end of a word
\0 Find a NUL character
\n Find a new line character
\f Find a form feed character
\r Find a carriage return character
\t Find a tab character
\v Find a vertical tab character
\xxx Find the character specified by an octal number xxx
\xdd Find the character specified by a hexadecimal number dd
\udddd Find the Unicode character specified by a hexadecimal number dddd

Quantifiers
Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n n?
Matches any string that contains zero or one occurrences of n n{X}
Matches any string that contains a sequence of X n's
n{X,Y} Matches any string that contains a sequence of X to Y n's n{X,} Matches
any string that contains a sequence of at least X n's n$ Matches any string
with n at the end of it
^n Matches any string with n at the beginning of it
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n

RegExp Object Properties Property Description

constructor Returns the function that created the RegExp object's prototype
global Checks whether the "g" modifier is set
ignoreCase Checks whether the "i" modifier is set
lastIndex Specifies the index at which to start the next match
multiline Checks whether the "m" modifier is set
source Returns the text of the RegExp pattern

RegExp Object Methods

Method Description
compile() Deprecated in version 1.5. Compiles a regular expression
exec() Tests for a match in a string. Returns the first match test()
Tests for a match in a string. Returns true or false toString() Returns the
string value of the regular expression

Using test()
The following example searches a string for the character "e":
Example
var patt = /e/;
patt.test("The best things in life are free!");
Since there is an "e" in the string, the output of the code above will be:
true
You don't have to put the regular expression in a variable first. The two lines
above can be shortened to one:
/e/.test("The best things in life are free!");

Using exec()
The exec() method is a RegExp expression method.
It searches a string for a specified pattern, and returns the found text as an
object. If no match is found, it returns an empty (null) object.
The following example searches a string for the character "e": Example 1
/e/.exec("The best things in life are free!");

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

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)
Practical.No.13.Create web page with Rollovers effect.
Rollover means a webpage changes when the user moves his or her mouse
over an object on the page. It is often used in advertising. There are two ways
to create rollover, using plain HTML or using a mixture of JavaScript and HTML.
We will demonstrate the creation of rollovers using both methods.
Creating Rollovers using HTML
The keyword that is used to create rollover is the <onmousover> event. For
example, we want to create a rollover text that appears in a text area. The text
“What is rollover?” appears when the user place his or her mouse over the text
area and the rollover text changes to “Rollover means a webpage changes
when the user moves his or her mouse over an object on the page” when the
user moves his or her mouse away from the text area.
<HTML>
<head></head>
<Body>
<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>

We create a rollover effect that can change the color of its text using the style
attribute.

<p onmouseover=”this.style.color=’red'”
onmouseout=”this.style.color=’blue'”>
Move the mouse over this text to change its color to red. Move the mouse
away to change the text color to blue.
</p>

This example shows how to create rollover effect that involves text and
images. When the user places his or her mouse pointer over a book title, the
corresponding book image appears.

Example
<!DOCTYPE html>
<html>
<head>
<title>Rollover Effect</title>
</head>
<body>
<table>
<tbody>
<trvalign=”top”>
<td width=”50″>
<a><imgsrc=”vb2010book.jpg” name=”book”></a>
</td>
<td><img height=”1″ width=”10″></td>
<td><a onmouseover=”document.book.src=’vb2010book.jpg'”><b>Visual Basic
2010 Made Easy</b></a>
<br>
<a onmouseover=”document.book.src=’vb2008book.jpg'”><b>Visual Basic
2008 Made Easy</b></a>
<br>
<a onmouseover=”document.book.src=’vb6book.jpg'”><b>Visual Basic 6 Made
Easy</b></a>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

OUTPUT:

Creating Rollovers Using JavaScript

Though HTML can be used to create rollovers, it can only performs simple
actions. If you wish to create more powerful rollovers, you need to use
JavaScript. To create rollovers in JavaScript, we need to create a JavaScript
function.
In this example, we have created an array MyBooks to store the images of
three book covers. Next, we create a ShowCover(book) to display the book
cover images on the page. Finally, we call
the ShowCover function using the onmouseover event.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script language=”Javascript”>
MyBooks=new Array(‘vb2010book.jpg’,’vb2008book.jpg’,’vb6book.jpg’)
book=0
function ShowCover(book){document.DisplayBook.src=MyBooks[book]
}</script></head>
<body>
<body>
<P align=”center”><imgsrc=”vb2010book.jpg” name=”DisplayBook”/><p>
<center>
<table border=0>
<tr>
<td align=center><a onmouseover=”ShowCover(0)”><b>Visual Basic 2010
Made Easy</b></a><br>
<a onmouseover=”ShowCover(1)”><b>Visual Basic 2008 Made
Easy</b></a><br>
<a onmouseover=”ShowCover(2)”><b>Visual Basic 6 Made Easy</b></a><br>
</td>
</tr>
</table>
</body>
</html>

OUTPUT:
 Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical.No.14. Develop a webpage for implementing
Menus
The <select> element is used to create a drop-down list. The <option> tags
inside the <select> element define the available options in the list.

Example
<!DOCTYPE html>
<html>
<head>
<title>webpage </title>
</head>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>

OUTPUT:
Dynamically Changing menu

To create an interdependent select list, where selecting the options of one

select element changes the options of another with corresponding content.

Example

<!DOCTYPE html>
<html>
<head>
<title>Dynamically changing menu </title>
<script language="javascript" type="text/javascript"> function
dynamicdropdown(listindex)
{
switch (listindex)
{
case "manual" :
document.getElementById("status").options[0]=new Option("Select
status",""); document.getElementById("status").options[1]=new
Option("OPEN","open"); document.getElementById("status").options[2]=new
Option("DELIVERED","delivered"); break;
case "online" :
document.getElementById("status").options[0]=new Option("Select
status",""); document.getElementById("status").options[1]=new
Option("OPEN","open"); document.getElementById("status").options[2]=new
Option("DELIVERED","delivered");
document.getElementById("status").options[3]=new
Option("SHIPPED","shipped"); break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Source:
<select id="source" name="source" onchange="javascript:
dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Status:
<script type="text/javascript" language="JavaScript"> document.write('<select
name="status" id="status"><option value="">Select
status</option></select>')
</script>

<select id="status" name="status">

<option value="open">OPEN</option>
<option value="delivered">DELIVERED</option>
</select>

</div>
</body>
</html>

OUTPUT:
 Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical.No.15. Develop a webpage for implementing
Status bars and web page protection.
JavaScript gives you the ability to modify the status bar. For example it can be
useful to display information about a link, when the user moves his mouse
over it or you can display a small amount of information about the page the
user is on in the status bar. You can also trick people into clicking a link, so be
careful how you use it. If you play too many tricks on your visitors, they might
not come back.

Status Bar Example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body onLoad="window.status='Welcome!';return true">
</body>
</html>
onLoad tells the browser that as soon as your page finished loading, it will
display in your current window’s status bar (window.status) the message
“Welcome!”. The return true is necessary because without, it won’t work.
Status Bar Example:

<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href="http://www.htmlcenter.com"
onMouseOver="window.status='HTMLcenter';return true"
onMouseOut="window.status='';return true"> HTMLcenter
</a>
</body>
</html>

OUTPUT:
Our second script listening shows how to modify the status bar using
onMouseOver and onMouseOut with links. When the user moves his mouse
over the link, it will display “HTMLcenter” in the status bar. When he moves his
mouse away from the link the status bar will display nothing.
You could also have another message displayed in the status bar, when the
user moves his mouse cursor away from the link. You have to change the
onMouseOut statement in the link to for example:
onMouseOut=”window.status=’You moved your cursor away from the
link.’;return true”.
Moving the message along the status bar
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text</tithttps://www.htmlcenter.com/blog/category/html5-2/le>
<script language="JavaScript"> var scrollPos = 0
var maxScroll = 100 var blanks = "”
function scrollText(text, milliseconds)
{ window.setInterval("displayText('"+text+"')", milliseconds)
}
function displayText(text)
{ window.defaultStatus = blanks + text
++scrollPos blanks += " "
if(scrollPos > maxScroll)
{scrollPos = 0 blanks = ""
}
}
</script>
</head>
<body onload="scrollText('Watch this text scroll!!!', 300)">
<p>Watch the text scroll at the bottom of this window!</p>
</body>
</html>

OUTPUT:
Protection web page

There are so many ways for users to get around this method of protection that
it shouldn't even really be considered a method of protecting your data.
Disable JavaScript. For this to work, JavaScript must be enabled on the
browser. View the source code and locate the image or text they want to copy
in the source code. Drag the image from the browser and drop it into the
desktop, file manager, or another open program. Disable the ability for user to
highlight text, copy, and paste it elsewhere.

Example
<!DOCTYPE html>
<html>
<head>
<title> Protection web page</title>
<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="http://www.java2s.com/style/logo.png" alt="www.java2s.com"
width="99" height="76">
</body>
</html>

OUTPUT:
If you want to disable the context menu, add the following code to the <body>:
oncontextmenu="function2(); return false;"

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)
Practical No: 16 Develop a web page for implementing
slideshow, banner.
Displaying banners ads is a common practice for showing advertisements on
web pages to the visitors. Banners ads are normally created using standard
graphic tools such as Photoshop, Paintbrush Pro, and other software. Banner
ads can be static or animated. Animated images are animated GIF files or flash
movies. Flash movies are created using Macromedia Flash and the browsers
must have installed flash plugin to view the movies. On the other hand, you
can create some animated effect using JavaScript, like rotating static banner
ads at a certain time interval.

Creating Rotating Banner Ads

Rotating banners ads comprises several banner images that constantly rotate
on a webpage at a fix time interval. You can create these banner images using
standard graphics tools.

Example:
<!DOCTYPE html>
<html>
<head>
<title> Creating Rotating Banner Ads </title>
<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg') banner=0
function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length)
{banner=0} document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/>
</center>
</body>
</html>
OUTPUT:

Creating Rotating Banner Ads with URL Links

Creating rotating banner images will provide the visitor to your webpage with
some basic information. However, if you want the visitor to get more
information by clicking on the banner images, you need to create rotating
banner ads that contain URL links.

<!DOCTYPE html>
<html>
<head>
<title>Creating Rotating Banner link</title>
<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')

MyBannerLinks=new
Array('http://www.vbtutor.net/','http://www.excelvbatutor.com/','http://onli
nebizguide4you.com/','htt p://javascript-tutor.net/')
banner=0 function
ShowLinks(){ document.location.href="http://www."+MyBannerLinks[banner]
}function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length)
{banner=0} document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120"
name="ChangeBanner"/></a>
</center>
</body>
</html>

OUTPUT:
Slide Show
The JavaScript code for the slideshow is almost similar to the JavaScript code of
the rotating banners but it gives control to the user to choose the banner ads
he or she wants to see by clicking on the forward and backward buttons.
To create the JavaScript slideshow, first of all, you need to create a few banner
images using some graphics tools, or you can snap some photos with your
digital camera or your smartphone.

<!DOCTYPE html>
<html >
<head>
<title> Slide Show</title>
<script language=”Javascript”>
MySlides=new Array(‘banner1.jpg’,’banner2.jpg’,’banner3.jpg’,’banner4.jpg’)
Slide=0
function ShowSlides(SlideNumber){

{ Slide=Slide+SlideNumber if (Slide>MySlides.length- 1){Slide=0

}
if (Slide<0)
{ Slide=MySlides.length- 1
}
document.DisplaySlide.src=MySlides[Slide]
}
}
</script>
</head>
<body>
<P align=”center”><img src=”banner1.jpg” name=”DisplaySlide” width=”900″
height=”120″ /><p>
<center>
<table border=0>
<tr>
<td align=center>
<input type=”button” value=”Back” onclick=”ShowSlides(-1)”>
<input type=”button” value=”Forward” onclick=”ShowSlides(1)”>
</td>
</tr>
</table>
</center>
</body>
</html>

OUTPUT:
 Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)