SOP 7 :
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.
Code :
[Link]
<html><head>
<script type="text/javascript">
function f1()
{
[Link]="red";
[Link]("f2()",5000);
}
function f2()
{
[Link]="green";
[Link]("f3()",5000);
}
function f3()
{
[Link]="pink";
[Link]("f4()",5000);
}
function f4()
{
[Link]="orange";
[Link]("f5()",5000);}
function f5()
{
[Link]="skyblue";
[Link]("f6()",5000);
}
function f6()
{
[Link]="voilet";
[Link]("f7()",5000);
}
function f7()
{
[Link]="aqua";
[Link]("f1()",5000);
}
function msg()
{
[Link]="Display of 7 different colors";
}
</script></head><body>
<h1 align="center">Different & visibility distinct background colors</h1>
<form name="frm">
<input type="button" value="change colors" onmouseover="f1()">
<input type="button" value="Message Display" onclick="msg()">
</form></body></html>
[Link]
<html><head>
<script type="text/javascript">
function f1()
{
[Link]="red";
[Link]("f2()",5000);
}
function f2()
{
[Link]="green";
[Link]("f3()",5000);}
function f3()
{
[Link]="pink";
[Link]("f4()",5000);
}
function f4()
{
[Link]="orange";
[Link]("f5()",5000);
}
function f5()
{
[Link]="skyblue";
[Link]("f6()",5000);
}
function f6()
{
[Link]="voilet";
[Link]("f7()",5000);
}
function f7()
{
[Link]="aqua";
[Link]("f1()",5000);
}
function msg()
{
alert("Display of 7 different colors") ;
}
</script></head>
<body onLoad="f1()" onUnload="msg()">
<h1 align="center">Different & visibility distinct background colors</h1>
</body>
</html>
SOP 8
Create event driven JavaScript program to convert temperature to and from Celsius,
Fahrenheit.
Formula: c/5= (f-32)/9
[where c=Temperature in Celsius and f=Temperature in Fahrenheit.] Output format : 40
Celsius=104 Fahrenheit
45 Fahrenheit = 7.22222222 Celsius
Code :
<html>
<head>
<script language="javascript">
function toCelsius()
{
var f,c;
f=[Link];
c= (5/9) * (f-32);
[Link](f + " FAHRENHEIT = "+c +" Celsius");
}
function toFaher()
{
var f,c;
c=[Link];
f= (c* 9 / 5) + 32
[Link](c + " Celsius = "+f +" FAHRENHEIT");
}
</script>
<body>
<h2>Convert TEMPERATURE to AND from Celsius, FAHRENHEIT.</h2>
<form name="f1">
Enter temperature in Fahernheit<input type = "text" name="t1"><br><br>
Enter temperature in Celscius<input type = "text" name="t2"><br><br>
<input type ="submit" value="CELSCIUS" onclick="toCelsius()">
<input type ="submit" value="FAHERNHEIT" onclick="toFaher()">
</form>
</body>
</html>
SOP 9:
Create JavaScript program which compute the average marks of students. Accept six subject
marks of student from user. Calculate average marks of student which is used to determine
the corresponding grades.
Range Grade
35 to 60 F
61 to 70 D
71 to 80 C
81 to 90 B
91 to 100 A
Code:
html>
<head>
<script type="text/javascript">
function grade()
{
var m1,m2,m3,m4,m5,m6,a;
m1=parseInt([Link]);
m2=parseInt([Link]);
m3=parseInt([Link]);
m4=parseInt([Link]);
m5=parseInt([Link]);
m6=parseInt([Link]);
a=(m1+m2+m3+m4+m5+m6)/6;
if(a>=91)
alert("Grade A");
else
{
if(a>=81)
alert("Grade B");
else
{
if(a>=71)
alert("Grade C");
else
{
if(a>=61)
alert("Grade D");
else
if(a>=35)
alert("Grade F");
} }} }
</script></head>
<body>
<h1 align="center"> RESULT </h1><form name="f1">
Enter Marks of English <input type="number" name="t1"><br><br>
Enter Marks of Physics <input type="number" name="t2"><br><br>
Enter Marks of Chemistry <input type="number" name="t3"><br><br>
Enter Marks of Maths <input type="number" name="t4"><br><br>
Enter Marks of I.T. <input type="number" name="t5"><br><br>
Enter Marks of Geography <input type="number" name="t6"><br><br>
<input type="submit" value="Print Grade" onClick="grade()">
</form></body></html>
SOP 10 :
Create event driven JavaScript program for the following. Make use of appropriate variables,
JavaScript inbuilt string functions and control structures.
To accept string from user and count number of vowels in the given string.
Code :
<html>
<head>
<title>Vowels Count with using String Functions</title>
<script type="text/javascript">
function cnt()
{
var s,i,ch,c;
c=0;
s=[Link];
for(i=0;i<=[Link];i++)
{
ch=[Link](i);
if(ch=='a'||ch=='e'||ch=='i'||ch=='o'||ch=='u'||ch=='A'||ch=='E'||ch=='I'||ch=='O'||ch=='U')
c++;
}
alert("Number of vowels in string are "+c);
}
</script></head>
<body>
<h3> Vowels Count </h3>
<form name="f1">
Enter any String
<input type="text" name="t1"><br><br>
<input type="submit" value="Vowels Count" onClick="cnt()">
</form>
</body></html>
Output :