SOP1: Changing Colors
[Link] [Link]
<!DOCTYPE html>
<html> <head> <title> Background Colors <!DOCTYPE html>
</title> </head> <body> <html>
<h1 align="center">7 Different & visibly <head> <title> Background Colors </title>
distinct background colors</h1> </head>
<form name="frm1"> <center> <body onLoad="f1()" onUnload
<input type="button" name="btncolor" ="msg()">
value="Change Colors" <h1 align="center">7 Different & visibly
onMouseOver="f1()"> distinct background colors</h1>
<input type="button" name"btnmsg" </body>
value="Message Display" <script type="text/javascript">
onClick="msg()"> function f1()
</form> </body> {
<script type="text/javascript"> [Link]="red";
function f1() [Link]("f2()",1500);
{ }
[Link]="red"; function f2()
[Link]("f2()",1500); } {
function f2() [Link]="green";
{ [Link]("f3()",1500);
[Link]="green"; }
[Link]("f3()",1500); } function f3()
function f3() {
{ [Link]="pink";
[Link]="pink"; [Link]("f4()",1500);
[Link]("f4()",1500); } }
function f4() function f4()
{ {
[Link]="orange"; [Link]="orange";
[Link]("f5()",1500); } [Link]("f5()",1500);
function f5() }
{ function f5()
[Link]="skyblue"; {
[Link]("f6()",1500); } [Link]="skyblue";
function f6() [Link]("f6()",1500);
{ }
[Link]="violet"; function f6()
[Link]("f7()",1500); } {
function f7() [Link]="violet";
{ [Link]("f7()",1500);
[Link]="aqua"; }
[Link]("f1()",1500); } function f7()
function msg() {
{ [Link]="aqua";
alert("Display of 7 different colors"); [Link]("msg()",1500);
} }
</script> function msg()
</html> {
alert("Display of 7 different colors");
} </script> </html>
CHM COLLEGE | IT JOURNAL
SOP2: Email Validations
[Link]
<!DOCTYPE html>
<html>
<body>
<form name="frm1">
Enter Name
<input type="text" name="t1"><br><br>
Enter Address<br>
<textarea name="t2" placeholder="PERMENANT ADDRESS"></textarea><br><br>
Enter Telephone Number
<input type="tel" maxlength="10"><br><br>
Enter Email Address
<input type="email" name="t3" pattern="[A-Z a-z]{5}-[@]{1}-[.]{1}"
placeholder="demo@[Link]"><br><br>
<input type="button" name="b1" value="Submit" onClick="chk()">
</form>
</body>
<script type="text/javascript">
function chk()
{
var x=[Link];
var atpos=[Link]("@");
var lastat=[Link]("@");
var firstdot=[Link](".");
var dotpos=[Link](".");
if(atpos<1||dotpos<atpos+2||dotpos+2>=[Link]||firstdot<atpos||atpos<lastat)
{
alert("Not a valid email address");
[Link]();
}
else
{
alert("Email address is accepted");
return true;
}
}
</script>
</html>
CHM COLLEGE | IT JOURNAL
SOP3: Counting Vowels
[Link]
<!DOCTYPE html>
<html>
<head>
<title>
String functions
</title>
</head>
<body>
<form name="frm1">
Enter Your Name
<input type="text" name="t1"><br><br>
<input type="button" name="btncheck" value="Count Vowels" onClick="cnt()">
</form>
</body>
<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=="a"||ch=="E"||
ch=="e"||ch=="I"||ch=="i"||ch=="O"||ch=="o"||ch=="U"||ch=="u")
c++;
}
alert("Number of Vowels in string are"+c);
}
</script>
</html>
CHM COLLEGE | IT JOURNAL
SOP4: Palindrome
[Link]
<!DOCTYPE html>
<html>
<head>
<title>
Palindrome
</title>
</head>
<body>
<form name="frm1">
Enter Your Name
<input type="text" name="t1"><br><br>
<input type="button" name="btncheck" value="Check Palindrome" onClick="chk()">
</form>
</body>
<script type="text/javascript">
function chk()
{
var a,s,i,ch,n;
a=[Link];
s=[Link]();
n=[Link];
var p=1;
for(i=0;i<n/2;i++)
{
if([Link](i)!=[Link](n-1-i))
{
p=0;
break;
}
}
if(p==1)
alert("String is Palindrome");
else
alert("String is not a Palindrome");
}
</script>
</html>
CHM COLLEGE | IT JOURNAL
SOP5: Temperature conversion
[Link]
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Celcius to Fahrenheit</h2>
<p>Insert a number into one of the input fields below:</p>
<p><input type="text" id="c" onkeyup="convert('C')">Degrees Celcius</p>
<p><input type="text" id="f" onkeyup="convert('F')">Degrees Fahrenheit</p>
<p>Note that the<b>[Link]()</b>method is used,so that the result will be returned as an
integer.</p>
<script type="text/javascript">
function convert(degree)
{
var x;
if(degree=="C")
{
x=[Link]("c").value*9/5+32;
[Link]("f").value=[Link](x);
}
else
{
x=([Link]("f").value-32)*5/9;
[Link]("c").value=[Link](x);
}
}
</script>
</body>
</html>
CHM COLLEGE | IT JOURNAL
SOP6: Calculating Grade and Average
[Link]
<!DOCTYPE html>
<html>
<body>
<form name="frm1">
Enter Marks of English
<input type="number" name="t1"><br><br>
Enter Marks of Maths
<input type="number" name="t2"><br><br>
Enter Marks of Physics
<input type="number" name="t3"><br><br>
Enter Marks of Chemistry
<input type="number" name="t4"><br><br>
Enter Marks of IT
<input type="number" name="t5"><br><br>
<input type="button" name="btnclick" value="Print Grade" onClick="grade()">
</form>
</body>
<script type="text/javascript">
function grade()
{
var m1,m2,m3,m4,m5,a=0,sum=0;
m1=parseInt([Link]);
m2=parseInt([Link]);
m3=parseInt([Link]);
m4=parseInt([Link]);
m5=parseInt([Link]);
sum = m1+m2+m3+m4+m5;
alert("Total = "+sum);
a= sum/5;
alert("Average Marks of Student is" +a);
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
alert("Grade F");
}
</script>
</html>
CHM COLLEGE | IT JOURNAL