ADVANCED JAVASCRIPT
SOP 1
Create a web page in HTML having a white background and one Button Object. 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 be at least 7
different and visibly distinct background colors excluding the default color.
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 be at least 7 different and visibly distinct background colors.
Solutions:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 [Link]="white">display 7 different colours</h1>
<input type ="button" value="change colours" onmouseover="a()"><br><br><input type="button"
value="display message" onclick="displaymsg()">
<Script type="text/javascript">
function a()
{[Link]= "red"; [Link]("b()", 1000);}
function b()
{[Link]="green"; [Link]("c()", 1000);}
function c()
{[Link]="blue"; [Link]("d()",1000);}
function d()
{[Link]="yellow"; [Link]("e()",1000);}
function e()
{[Link]="purple"; [Link]("f()",1000);}
function f()
{[Link]="pink"; [Link]("g()",1000);}
function g()
{[Link]="pink"; [Link]("a()",1000);}
function displaymsg()
{[Link]("<h1> BALBHARTI JR COLLEGE OF SCIENCE </h1>")
}
</script></body></html>
</body>
</html>
OUTPUT No. 1
OUTPUT No.2
SOP 3
Create event driven JavaScript program for the following. Make use of appropriate variables,
JavaScript inbuilt string functions and control structures.
Solutions:
<!DOCTYPE html>
<html>
<head>
<title>Sop 3 JAVasript Count vowels</title>
</head>
<body>
<form name="form1">
<h1>Enter the String whose vowel is to be counted</h1>
<input type="text" name="text1">
<input type="button" name="btn_checkvowel" value="Click to count" Onclick="count()">
</form>
<script type="text/javascript">
function count()
{
var i,ch, str, counter=0;
str=[Link];
for(i=0;i<[Link];i++)
{
ch=[Link](i)
if(ch=='A' || ch=='a' || ch=='e' || ch=='E' || ch=='i' || ch=='I' || ch=='o' || ch=='O' || ch=='u' ||
ch=='U') counter++;
}
alert("Number of Vowels in Entered String is:"+counter);
}
</Script>
</Body>
</html>
Output Sop 3
SOP 4
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 reverse the given string and check whether it is palindrome
or not.
Solutions:
<!DOCTYPE html>
<html><head>
<title>check palindrome</title>
</head><body>
<h1> Palindrome Checker </h1>
Enter the value to check the palindrome<br><br>
<form name="palindrome1">
<input type="text" name="text1" placeholder="enter your text">
<input type="button" value="check" onclick="checkpalindrome()">
</form>
<script type="text/javascript">
function checkpalindrome()
{
var string =[Link]
var len=[Link];
var result=true;
for
(var i=0;i<len/2;i++)
{if (string[i] != string[len - 1 - i])
{result=false;}
}
if(result==true)
{[Link]("Yes, it’s a palindrome ");}
else
{[Link](" No, it’s not a palindrome ");}
}
</script></body> </html>
Output sop4:
SOP 6
Create JavaScript program which computes 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.
Solutions:
<html>
<head>
<title> calculate the grade </title>
<body>
<h1>JavaScript program to calculate average marks of students</h1>
<form name="form1">
<p>Enter Marks of subjects of students </p>
<br><br>
English Marks
<input type="text" name="eng">
<br><br>
Physics Marks
<input type="text" name="phy">
<br><br>
Chemistry Marks
<input type="text" name="chem">
<br><br>
IT Marks
<input type="text" name="it">
<br><br>
Maths Marks
<input type="text" name="maths">
<br><br>
Biology Marks
<input type="text" name="bio">
<br><br>
<input type="submit" value="print grade"
onclick="grade()">
<script type="text/javascript">
function grade()
{
var m1, m2, m3, m4, m5, m6, avg;
m1=parseInt([Link]);
m2=parseInt([Link]);
m3=parseInt([Link]);
m4=parseInt([Link]);
m5=parseInt([Link]);
m6=parseInt([Link]);
avg=(m1+m2+m3+m4+m5+m6)/6;
alert("Average marks of students for six subjects is: "+ avg);
if(avg>=91 && avg<=100)
{
grade = 'A';
}
else if(avg>=81 && avg<=90)
{
grade = 'B';
}
else if(avg>=71 &&-avg<=80)
{
grade = 'C';
}
else if(avg>=61 && avg<=70)
{
grade = 'D';
}
else if (avg>=35 && avg<=60)
{
grade = 'F';
}
alert ("Grade of the student is: "+ grade);
}
</script>
</body>
</html>
Output sop 6
______________________________XXXXXXXXXXXXXXX______________________________