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>
0 comments:
Post a Comment