Practical No.
Create a webpage in HTML having white background and button object. Write code in javascript
such that when mouse placed on the first button the color of background should be changed
without clicking after every second. There should be seven different background color, appropriate
message should be displayed in browser 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 be at least 7 different and visibly distinct background colors.
Coding
[Link]
<!DOCTYPE html>
<html>
<head><title>color change</title></head>
<body>
<form>
<h1>Background colour is changed every 2 second</h1>
<input type="button" value="change color" onmouseover="changeColor()">
<input type="button" value="Display Message" onclick="dismsg()">
</form>
</body>
<script type="text/javascript">
var colors = new Array("blue", "yellow", "red", "green", "orange", "cyan","indigo");
var i=0;
function changeColor()
[Link] = colors[i];
i++;
if(i>[Link])
i=0;
[Link]("changeColor()",2000);
function dismsg()
[Link]="All Seven Colors Displayed";
</script>
</html>
[Link]
<!DOCTYPE html>
<html>
<head><title>color change</title></head>
<body onload="changeColor()" onunload="dismsg()">
<h1>Background colour is changed every 2 second</h1>
</body>
<script type="text/javascript">
var colors = new Array("blue", "yellow", "red", "green", "orange","cyan",
"indigo");
var i=0;
function changeColor()
[Link] = colors[i];
i++;
if(i>[Link])
i=0;
[Link]("changeColor()",2000);
function dismsg()
alert("Display 7 different colors")
</script>
</html>
Practical No.7
Create JavaScript program for the following form validations. Make use of HTML5 properties to do
the following validations :
1) Name, address, contact number and email are required fields of the form.
2) Address field should show the hint value which will disappear when field gets focus or key press
event.
3) Telephone number should be maximum 10 digit number only.
4) 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(.).
5) Make use of pattern attribute for email to accept lowercase, uppercase alphabets, digits and
specified symbols.
Information Form
Your Name
Address
Permanent address
Contact
Email
Submit
Coding
[Link]
<!DOCTYPE html>
<html>
<head><title>Information Form</title></head>
<body>
<h1>Information Form</h1>
<form name="f1">
Your Name<input type="text" name="stu_name"><br>
Address<textarea name="stu_address" placeholder="Permanent Address">
</textarea><br>
Contact<input type="tel" name="stu_tel" maxlength="10"><br>
Email<input type="email" name="stu_email" pattern="[A-Z a-z]{5}-[@]
{1}-[.]{1}"><br>
<input type="button" name="b1" value="submit" onclick="validate_email()">
</form>
</body>
<script type="text/javascript">
function validate_email()
var x=f1.stu_email.value;
var at_pos=[Link]("@");
var last_pos=[Link]("@");
var firstdot_pos=[Link](".");
var dot_pos=[Link](".");
if (at_pos<1||dot_pos<at_pos+2||dot_pos+2>=[Link]||firstdot_pos<
at_pos||at_pos<last_pos)
alert("Not a Valid email address");
f1.stu_email.focus();
else
alert("Valid Email Address");
return true;
</script>
</html>
Practical No.8
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.
Coding
[Link]
<!doctype html>
<html>
<body>
<form name="f1">
Enter string
<input type="text" name="t1"><br>
<input type ="button" name ="b1" value="count vowels" onclick="chk()">
</form>
</body>
<script type="text/javascript">
function chk()
var 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>
Practical No.9
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.
Range Grade
35 to 60 F
61 to 70 D
71 to 80 C
81 to 90 B
91 to 100 A
Coding
[Link]
<!DOCTYPE html>
<html>
<head><title>Calculate Average & Grade</title></head>
<body>
<form name="f1">
<h1>Enter Marks of subjects of students</h1><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="button" name="b1" value="Calculate Average Marks & print grade"
onclick="calculate_grade()">
</form>
</body>
<script type="text/javascript">
function calculate_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>
</html>