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.
Color1.html
<! Doctype html> <html> <head>
<script type = "text/javascript">
function f1()
{
document.bgColor = "red"
window.setTimeout("f2()", 4000)
}
function f2()
{
document.bgColor = "green"
window.setTimeout("f3()", 4000)
}
function f3()
{
document.bgColor = "blue"
window.setTimeout("f4()", 4000)
}
function f4()
{
document.bgColor = "yellow"
window.setTimeout("f5()", 4000)
}
function f5()
{
document.bgColor = "orange"
window.setTimeout("f6()", 4000)
}
function f6()
{
document.bgColor = "pink"
window.setTimeout("f7()", 4000)
}
function f7()
{
document.bgColor = "lime"
window.setTimeout("f1()", 4000)
}
</script></head>
<body>
<h1> " CHANGE BACKGROUND COLOR AFTER 5 SECOND
AUTOMATICALLY </h1>
<input type = button value = "CHANGE BACKGROUND COLOR" onClick =
"f1()">
</body> </html>
Color2.html
<! Doctype html> <html> <head>
<script type = "text/javascript">
function f1()
{
document.bgColor = "red"
window.setTimeout("f2()", 4000)
}
function f2()
{
document.bgColor = "green"
window.setTimeout("f3()", 4000)
}
function f3()
{
document.bgColor = "blue"
window.setTimeout("f4()", 4000)
}
function f4()
{
document.bgColor = "yellow"
window.setTimeout("f5()", 4000)
}
function f5()
{
document.bgColor = "orange"
window.setTimeout("f6()", 4000)
}
function f6()
{
document.bgColor = "pink"
window.setTimeout("f7()", 4000)
}
function f7()
{
document.bgColor = "lime"
window.setTimeout("f1()", 4000)
alert ("Oops! Sorry next Page is Unload")
}
</script></head>
<body>
<h1> " CHANGE BACKGROUND COLOR AFTER 5 SECOND
AUTOMATICALLY" </h1>
<input type = button value = "CHANGE BACKGROUND COLOR" onClick =
"f1()">
</body>
</html>
SOP 3 : 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.
<!DOCTYPE html><html><head><title></title></head>
<body>
<script type="text/javascript">
function getVowels()
{
var vowelsCount = 0;
var str = document.getElementById("t1").value;
var string = str.toString();
for (var i = 0; i <= string.length - 1; i++)
{
if (string.charAt(i) == "a" || string.charAt(i) == "e" || string.charAt(i) == "i" ||
string.charAt(i) == "o" || string.charAt(i) == "u")
{
vowelsCount += 1;
}
}
//document.write("Total Vowels : "+vowelsCount);
document.getElementById('demo').innerHTML = "Total Vowels : "+vowelsCount;
return vowelsCount;
}
</script>
<tr>
<td><input type="text" id="t1"></td>
<td><input type="submit" name="submit" onclick="getVowels()"></td>
</tr> <p id="demo"></p></body> </html>
SOP 4 : Create event driven JavaScript program for the
following. Make use ofappropriate variables, JavaScript
inbuilt string functions and control structures.
To accept string from user and reverse the given string and check whether it
is palindrome or not.
<!DOCTYPE html><html>
<head><title></title></head>
<body>
<script type="text/javascript">
function reverse_String()
{
var str = document.getElementById('s1').value;
var final_str = str;
var split = str.split("");
var reverse = split.reverse();
var reverse_data = reverse.join(" ");
document.write("Reverse : "+reverse_data);
if (final_str==reverse_data) {
document.write("<br>It is palindrome ");
}
else
{
document.write("<br>not palindrome ");
}
}
</script>
<input type="text" id="s1" placeholder="Enter a Striing">
<input type="Submit" name="" onClick="reverse_String()">
</body>
</html>
SOP 5 : 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
<!DOCTYPE html> <html><head> <title></title>
<script type="text/javascript">
function get_Fahrenheit(){
var c = parseInt(document.getElementById('c1').value);
var f;
//(f-32)/9 = c/5;
f = c/5*(9)+32;
document.write("Fahrenheit : "+f);
}
function get_Celsius(){
var f = parseInt(document.getElementById('f1').value);
var c;
//(f-32)/9 = c/5;
c = ((f-32)/9)*5;
document.write("Celsius : "+c);
}
</script> </head> <body>
<input type="text" id="c1" placeholder="Temperature in Celsius">
<input type="submit" onclick="get_Fahrenheit()"> <br>
<input type="number" id="f1" placeholder="Temperature in Fahrenheit">
<input type="submit" onClick="get_Celsius()"> </body> </html>
