A Laboratory Manual for

Client Side
Scripting Language
(22519)
Semester –V
(CO)

Maharashtra State Board of Technical Education, Mumbai.

 Maharashtra State
Board of Technical
Education
Certificate
This is to certify that Mr./Ms.

…………………………………………………………………………… Roll No of Third Semester

of Diploma in Computer Technology of

Institute,………………………………………………………………………………………………………………

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

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

…...................as Prescribed in the curriculum.

Place: ………………………………… Enrollment No: ………………………………..

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

Subject Teacher Head of Department Principal

Seal of Institution
Client Side Scripting Languages (22519)

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.

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

 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>

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

OUTPUT :
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
}

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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 :

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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.. }whi
le (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)
{ isPrime = false;
Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal
 } 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)

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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>

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

OUTPUT :
POP Method :
<!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>

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

UPPERCASE:

Lowercase:

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

<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>
</select>
</td>

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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>
<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>
<script type=”text/javascript”>

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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 :
Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal
 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/>"
}

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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)

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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>

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

</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>
Marks Obtained
Dated sign of

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

1. Number
2. String
3. RegExp
4. Array
5. Math
6. Date
7. Boolean

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

 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

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

 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.

Maharashtra State board of Education Prepared By-Miss.P.S.Dungarwal

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

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

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

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

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

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

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

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

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> Marks Obtained Dated Signed of
</body> teacher
</html> 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

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

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

<html>
<head>
<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;
}
 </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>

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:

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

<html>
<head>
<title>Scrolling Text</title>
<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>

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

<html>
<head>
<script language="JavaScript">
function function2() {
alert("This image is copyrighted")
}
</script>
</head>

<body oncontextmenu="function2()">
<p>Right click in the image.</p>
<img oncontextmenu="function2()"
src="http://www.java2s.com/style/logo.png"
alt="www.java2s.com"
width="99"
height="76">
</body>
</html>

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.

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

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.
<html>
<head>
<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://
onlinebizguide4you.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>

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.

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

Marks Obtained Dated Signed of

teacher
Process Product Total(50)
Related(35) Related(15)