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 at least be 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
second. 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.
Color.html
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<center> <h1>THIS PAGE HAVE BACKGROUND COLORS</h1>
<form
name=”frm1”>
<input
type="button" value="colors"
OnMouseOver='window.setTimeout("f1()",500)'>
<input
type="button" value="Message"
onclick="msg()">
</form>
</center> </body>
<script
language="javascript">
function
f1() {
document.bgColor="aqua";
window.setTimeout("f2()",500);
}
function
f2() {
document.bgColor="purple";
window.setTimeout("f3()",500);
}
function
f3() {
document.bgColor="magenta";
window.setTimeout("f4()",500);
}
function
f4() {
document.bgColor="yellow";
window.setTimeout("f5()",500);
}
function
f5() {
document.bgColor="lavender";
window.setTimeout("f6()",500);
}
function
f6() {
document.bgColor="orange";
window.setTimeout("f7()",500);
}
function
f7() {
document.bgColor="pink";
window.setTimeout("f1()",500);
}
function
msg() {
window.status="Program
is successfully run....."; }
</script>
</body> </html>
Colors1.html
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body
onload="f1()" onUnload="msg()">
<h1
align="center">THIS PAGE HAVE 7 DIFFERENT BACKGROUND
COLORS</h1>
<script language="javascript">
function
f1()
{
document.bgColor="aqua";
window.setTimeout("f2()",500);
}
function
f2()
{
document.bgColor="purple";
window.setTimeout("f3()",500);
}
function
f3()
{
document.bgColor="magenta";
window.setTimeout("f4()",500);
}
function
f4() {
document.bgColor="yellow";
window.setTimeout("f5()",500);
}
function
f5() {
document.bgColor="lavender";
window.setTimeout("f6()",500);
}
function
f6() {
document.bgColor="orange";
window.setTimeout("f7()",500);
}
function
f7() {
document.bgColor="pink";
window.setTimeout("f1()",500);
}
function
msg()
{
alert("document is
unloaded ......") }
</script>
</body>
</html>
SOP 2: Create JavaScript
program for the following form validations. Make use of HTML5 properties to do the following
validations.
· Name, address, contact
number and email are required
fields of the form.
· Address field should
show the hint value which
will disappear when field
gets focus or key press event.
· Telephone number
should be maximum 10 digit number only.
· Email field should
contain valid email address,
@ should appear only
once and not at the beginning or at end. It must contain at least one
dot (.).
· Make use of pattern
attribute for email to
accept lowercase, uppercase alphabets, digits and specified symbols.
Email.html
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<form
name="myform">
Enter Name : <input
type="text" name="t1"> <br><br>
Enter Address
:<br> <br>
<textarea
name="t2" placeholder="Permenant Address" rows=5
cols=30></textarea> <br><br>
Enter Telephone Number :
<input type="tel" maxlength="10">
<br><br>
Enter Email Address :
<input type="email" name="e1" pattern="[A-Z a-z]{5}-[@]{1}-[.]{1}"
placeholder="abc123@gmail.com"> <br><br>
<input
type="button" name="b1" value="Submit"
onclick="chk()">
</form>
<script
type="text/javascript">
function chk()
{
var x=myform.e1.value;
var
atpos=x.indexOf("@");
var lastat=x.lastIndexOf("@");
var
firstdot=x.indexOf(".");
var
dotpos=x.lastIndexOf(".");
if(atpos<1 || dotpos
<atpos+2 || dotpos+2 >= x.length || firstdot<atpos || atpos<lastat)
{
alert("Not a valid
email address");
myform.e1.focus();
}
else {
alert("Email
address is accepted");
return true;
} }
</script>
</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 the user and count number of vowels in the given string.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form
name="f1">
Enter String : <input
type="text" name="t1"> <br>
<input
type="button" value="Count Vowels"
onclick="check()">
</form>
<script type="text/javascript">
function check()
{
var s,i,ch,c;
c=0;
s=document.f1.t1.value;
for(i=0;i<=s.length;i++)
{
ch=s.charAt(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>
</body>
</html>
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.
Palindrome.html
<!DOCTYPE html>
<html>
<head>
<title>String Palindrome</title> </head>
<body>
<form
name="f1">
Enter Your String :
<input type="text" name="t1"> <br>
<input type="button"
name="btnchk" value="Check Palindrome"
onclick="chk()">
</form>
<script
type="text/javascript">
function chk()
{
var a,s,i,ch,n;
a=f1.t1.value;
s=a.toLowerCase();
n=s.length;
var p=1;
for(i=0;i<=n/2;i++)
{
if(s.charAt(i)!=s.charAt(n-1-i))
{ p=0;
break;
} }
if(p==1)
{
alert("String is
Palindrome");
}
else
{
alert("String is
not Palindrome");
} }
</script>
</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.
celcius.html
<!DOCTYPE html>
<html>
<head>
<title>Celcius to
Fahrenheit</title>
</head>
<body
bgcolor="orange">
<form
name="f1">
<h2
align="center">Conversion of temperature Celcius To
Fahrenhet</h2>
<input
type="text" name="c" placeholder="Tempreture in
Celcius" onkeyup="convert('C')"> Degrees Celsius <br>
<br>
<input
type="text" name="f" placeholder="Temperature in Fahrenhet"
onkeyup="convert('F')"> Degrees Fahrenheit
</form>
<script
type="text/javascript">
function convert(degree)
{
var x;
if(degree
=="C")
{
x = document.f1.c.value
* 9 / 5 + 32;
document.f1.f.value=Math.round(x);
}
else
{
x = (document.f1.f.value
- 32) * 5 / 9;
document.f1.c.value=Math.round(x);
}
}
</script>
</body>
</html>
SOP 6: 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.
Grade.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>Enter Marks
for following subjects</h3>
<form
name="frm1">
English : <input
type="text" name="t1"> <br><br>
Mathematics : <input
type="text" name="t2"> <br><br>
Physics : <input
type="text" name="t3"> <br><br>
Chemistry : <input
type="text" name="t4"> <br><br>
Biology : <input
type="text" name="t5"> <br><br>
Infromation Technology :
<input type="text" name="t6"> <br><br>
<input
type="button" name="btnclick" value="Generate
Result" onclick="grade()">
</form>
<script
type="text/javascript">
function grade()
{
var
eng,math,phy,chem,bio,it,result;
eng=parseInt(frm1.t1.value);
math=parseInt(frm1.t2.value);
phy=parseInt(frm1.t3.value);
chem=parseInt(frm1.t4.value);
bio=parseInt(frm1.t5.value);
it=parseInt(frm1.t6.value);
result=(eng+math+phy+chem+bio+it)/6;
alert("Average
marks of student is : "+result);
if (result>=91)
{
alert("Grade
A");
}
else if(result>=81)
{
alert("Grade
B");
}
else if (result>=71)
{
alert("Grade
C");
}
else if (result>=61)
{
alert("Grade
D");
}
else
{
alert("Grade
F");
}
}
</script>
</body>
</html>
SOP 7: Write a
JavaScript function to get difference between two dates in days. Create a page
in HTML that contains input box to accept date from user. The input boxes
should be used by users to enter their date of birth in the format dd-mm-yyyy.
Do not make use of any dropdown boxes.
Example –
Date_diff_indays(‘04/02/2019’,’11/04/2019’); Output: 66
Date_diff_indays(‘01/01/2020’,’31/01/2019’); Output: -30
Datediff.html
<!DOCTYPE html>
<html>
<head>
<title>Date
Difference</title>
</head>
<body>
<form
name="f1">
Enter Date 1 : <input
type="text" name="t1"
placeholder="dd-mm-yyyy"> <br><br>
Enter Date 2 : <input
type="text" name="t2" placeholder="dd-mm-yyyy">
<br><br>
<input
type="button" value="Calculate"
onclick="calculate()">
</form>
<script
type="text/javascript">
function calculate()
{
var date1,
date2;
//define two date
object variables with dates inside it
date1 =
document.f1.t1.value;
date2 =
document.f1.t2.value;
d1=new
Date(date1);
d2=new
Date(date2);
//calculate time
difference
var
time_difference = d2.getTime() - d1.getTime();
//calculate days
difference by dividing total milliseconds in a day
var days_difference
= time_difference / (1000 * 60 * 60 * 24);
document.write("Number
of days between dates <br>"+d1+" and <br>"+d2+"
are: <br>"+ days_difference+" days");
}
</script>
</body>
</html>
No comments:
Post a Comment