Scribd
Upload
25 views23 pages

Java Script

This document describes creating an event-driven client-side script using JavaScript. The script will change the background color of a web page every few seconds when the mouse hovers over a button, cycling through 7 different colors. It will also display a status message when the second button is clicked. The script uses setTimeout() functions to change the background color after a delay, and an onmouseover and onclick event to trigger the color changes and status message, respectively.

Uploaded by

SALMA ANSARI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
25 views23 pages

Java Script

This document describes creating an event-driven client-side script using JavaScript. The script will change the background color of a web page every few seconds when the mouse hovers over a button, cycling through 7 different colors. It will also display a status message when the second button is clicked. The script uses setTimeout() functions to change the background color after a delay, and an onmouseover and onclick event to trigger the color changes and status message, respectively.

Uploaded by

SALMA ANSARI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 23

XP

Practical No : 8

Event driven client side scripting


QUESTION XP

Create a web page in HTML having a white background and two Button Objects.
Write code by using JavaScript such that

When the mouse is placed over the first button object without clicking, the color of the
background of the page should change after every few seconds.
There should at least be 7 different and visibly distinct background colors excluding
the default color.

When the second button object is clicked, appropriate message should be


displayed in Browsers status bar.
XP

 Javascript function:
setTimeout :
It executes a block of code after
specific time.
 Javascript Events :
 Onmouseover
 Onclick

3
XP

Syntax:

setTimeout(“block of code”,time inmilliseconds)

Example:
setTimeout(“p1()”,2000)

4
Javascript Program Layout: XP

<html><head><title> JS</title>
<script language = “javascript”>
. . . JS functions…
</script>
</head>
<body>
Buttons, textboxes
</body></html>
5
XP
<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

<body>
<br>
<h1> This is Event Driven Client Side Script </h1>
<form name=f1>
<input type="button" value=" place your cursor " onmouseover="p1()">
<input type="button" value=" Click Here for status message " onClick="StatusBar()" >
</form>

</body>
</html>
XP

7
XP
<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

function p1()
{
document.bgColor="BLUE";
window.setTimeout("p2()",2000);
}
XP

9
XP
<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

function p1()
{
document.bgColor="BLUE";
window.setTimeout("p2()",2000);
}

function p2()
{
document.bgColor="PINK";
window.setTimeout("p3()",2000);
}
XP

11
XP
<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

function p1()
{
document.bgColor="BLUE";
window.setTimeout("p2()",2000);
}

function p2()
{
document.bgColor="PINK";
window.setTimeout("p3()",2000);
}

function p3()
{
document.bgColor="BLACK";
window.setTimeout("p4()",2000);
}
XP

13
XP
<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

function p4()
{
document.bgColor="YELLOW";
window.setTimeout("p5()",2000);
}
XP

15
XP

<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

function p4()
{
document.bgColor="YELLOW";
window.setTimeout("p5()",2000);
}
function p5()
{
document.bgColor=“ORANGE";
window.setTimeout("p6()",2000);
}
XP

17
XP
<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

function p4()
{
document.bgColor="YELLOW";
window.setTimeout("p5()",2000);
}
function p5()
{
document.bgColor=“ORANGE";
window.setTimeout("p6()",2000);
}
function p6()
{
document.bgColor=“RED";
window.setTimeout("p7()",2000);
}
XP

19
XP
<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

function p6()
{
document.bgColor=“RED ";
window.setTimeout("p7()",2000);
}
function p7()
{
document.bgColor=“GREEN";
window.setTimeout("p1()",2000);
}
XP

21
XP
<html>
<head>
<title> Event driven client side script </title>
<script language="javascript">

function p6()
{
document.bgColor=“RED ";
window.setTimeout("p7()",2000);
}
function p7()
{
document.bgColor=“GREEN";
window.setTimeout("p1()",2000);
}
function StatusBar()
{
window.status = "This is event driven program";
}
XP

StatusBar
23

You might also like