Scribd
Upload
0 views4 pages

JavaScript SOP 1

The document outlines the creation of two HTML web pages that utilize JavaScript for changing background colors and displaying messages. The first page features two buttons: one changes the background color every few seconds when hovered over, and the other displays a message when clicked. The second page automatically changes the background color after loading and shows an alert message upon unloading the page.

Uploaded by

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

JavaScript SOP 1

The document outlines the creation of two HTML web pages that utilize JavaScript for changing background colors and displaying messages. The first page features two buttons: one changes the background color every few seconds when hovered over, and the other displays a message when clicked. The second page automatically changes the background color after loading and shows an alert message upon unloading the page.

Uploaded by

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

SOP 1 : Create a web page in HTML having a white background and two Button Objects.

Write code 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 __ 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.
Create another web page using JavaScript where the background color changes automatically after every ___
seconds. This event must be triggered automatically after the page gets loaded in the browser. There should at
least be 7 different and visibly distinct background colors. When the page is unloaded, the appropriate alert
message should be displayed.

[Link]
<!DOCTYPE html>
<html>
<head>
<title> Background Colors</title>
</head>
<body>
<h1 align="center">7 Different & visibly distinct background colors</h1>
<form name="frm1">
<center>
<input type="button" name="btncolor" value="Change Colors" onMouseOver="f1()">
<input type="button" name"btnmsg" value="Message Display" onClick="msg()">
</form>
</body>

<script type="text/javascript">

function f1()
{
[Link]="red";
[Link]("f2()",1500);
}

function f2()
{
[Link]="green";
[Link]("f3()",1500);
}

function f3()
{
[Link]="pink";
[Link]("f4()",1500);
}

function f4()
{

SMT CHM COLLEGE | IT JOURNAL


[Link]="orange";
[Link]("f5()",1500);
}

function f5()
{
[Link]="skyblue";
[Link]("f6()",1500);
}
function f6()
{
[Link]="violet";
[Link]("f7()",1500);
}

function f7()
{
[Link]="aqua";
[Link]("f1()",1500);
}

function msg()
{
alert("Display of 7 different colors");
}
</script>
</html>

OUTPUT

SMT CHM COLLEGE | IT JOURNAL


[Link]
<!DOCTYPE html>
<html>
<head>
<title> Background Colors </title>
</head>
<body onLoad="f1()" onUnload ="msg()">
<h1 align="center">7 Different & visibly distinct background colors</h1>
</body>

<script type="text/javascript">

function f1()
{
[Link]="red";
[Link]("f2()",1500);
}

function f2()
{
[Link]="green";
[Link]("f3()",1500);
}

function f3()
{
[Link]="pink";
[Link]("f4()",1500);
}

function f4()
{
[Link]="orange";
[Link]("f5()",1500);
}

function f5()
{
[Link]="skyblue";
[Link]("f6()",1500);
}

function f6()

SMT CHM COLLEGE | IT JOURNAL


{
[Link]="violet";
[Link]("f7()",1500);
}

function f7()
{
[Link]="aqua";
[Link]("msg()",1500);
}

function msg()
{
alert("Display of 7 different colors");
}
</script>
</html>

SMT CHM COLLEGE | IT JOURNAL

You might also like