Practical No:7 Name Of Student:
Program:- Color1.html
<!DOCTYPE html>
<html>
<head><title>Background colors</title></head>
<body id="background">
<form>
<input type="button" value="Change Colors" onMouseOver="setInterval(changeColor,1000)">
<input type="button" value="Display Message" onClick="displayMessage()">
</form>
<script type="text/javascript">
var i=0;
//when click on first button this function will call...
function changeColor()
{
varbg = document.getElementById("background");
var color = ["red", "yellow", "brown", "green","yellow","pink","orange"];
bg.style.backgroundColor = color[i];
i = i+1;
if(i==7)
{
bg.style.backgroundColor = "white";
}
}
//when click onsecond button this function will call...
function displayMessage()
{
//window.status property is not supported by browser so that we used alert method..
window.status="Background Color is being changed every 1 seconds.....";
window.alert("Background Color is being changed every 1 seconds");
}
</script>
</body>
</html>
Output1:- Color1.html
Program:- Color2.html
<!DOCTYPE html>
<html>
<head>
<title>page 2</title>
</head>
<body onload="changeColor()" onunload="displayMessage()">
<script type="text/javascript">
var colors = new Array("blue", "yellow", "red", "green", "pink","cyan","indigo");
var i=0;
function changeColor()
{
document.body.style.backgroundColor = colors[i];
i++;
window.setTimeout("changeColor()",2000);
}
//Due to different browser settings, onunload event may not always work as expected.So that
this function might not work properly..
function displayMessage()
{
alert("Background color is changed after every 2 second...");
}
</script>
</body>
</html>
Output 2:- Color2.html
Practical No:8 Name Of Student:
SOP3: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.
Program:- Vowels.html
<!DOCTYPEhtml>
<html>
<head><title>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="checkvowel" value="ClickToCountVowels" onclick="count()">
</form>
<script type="text/javascript">
function count()
{
var i,ch,str,counter=0;
str=form1.text1.value;
for(i=0;i<str.length;i++)
{
ch=str.charAt(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 are:"+counter);
}
</script></body></html>
Output :- Vowels.html
Practical No:9 Name Of Student:
SOP4: 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.
Program:- Palindrome.html
<html>
<head> <title> JavaScript Palindrome </title></head>
<body>
<!—comment is html-take a string from the user-->
<input type="text" id="s1" placeholder="Enter a Striing">
<input type="submit" onclick="reverse_string()">
<script type="text/javascript">
//Use JavaScript programming code to validate the Palindrome numbers or strings
function reverse_string()
{
var string = document.getElementById('s1').value;
// convert the string into an array using the split() function of array object
var splitarr = string.split ('');
// use reverse() method to reverse the array values
var revsplitarr = splitarr.reverse();
// use join() method to group the array values into the string
var revstring = revsplitarr.join('');
if (string == revstring) // if string condition is equal to the revString
{
alert('It is a Palindrome string '); // print the Palindrome
}
else
{
alert (' It is not a Palindrome string' ); // if the condition is not true.
}
}
</script>
</body>
</html>
Output 1 :- Palindrome.html
Output 2 :- Palindrome.html
Practical No:10 Name Of Student:
SOP3: 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
45Fahrenheit=7.22222222Celsius
Program:- Temperature.html
<!DOCTYPE html>
<html>
<head>
<title>SOP 5 Javascript</title>
</head>
<body>
<h2>JavaScript code to convert Celsius to Fahrenhiet or vicversa</h2>
<br> <h3>Enter the Temperature</h3>
<p>
<input type="text" id="t1_celsius" onkeyup="convert('C')" placeholder="Temp in Degree
Celsius"> Temperature in degree Celsius
</p>
<br>
<p>
<input type="text" id="t2_fah" onkeyup="convert('F')" placeholder="Temp in Degree
Fahrenheit"> Temperature in degree Fahrenheit
</p>
<script>
function convert(temperature)
{
var t;
if (temperature == "C")
{
//get value from textbox 1 and put in formula of Fahrenheit…..
t= (9*document.getElementById("t1_celsius").value / 5) + 32;
//show the value of Fahrenheit in textbox 2…..
document.getElementById("t2_fah").value = t+" Fahrenheit";
}
else
{
//get value from textbox 2 and put in formula of Celsius…..
t= (document.getElementById("t2_fah").value -32) * 5 / 9;
//show the value of Celsius in textbox 1…..
document.getElementById("t1_celsius").value =t.toFixed(8)+" Celcius"
}
}
</script>
</body>
</html>
Output 1 :- Temperature.html
Output 2 :- Temperature.html
Practical No:11 Name Of Student:
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.
Range Grade
35 to 60 F
61 to 70 D
71 to 80 C
81 to 90 B
91 to 100 A
Program:- Average.html
<!DOCTYPE html>
<html>
<head>
<title>Sop 6 Javascript program</title>
</head>
<body>
<h1>Javascript program to compute average marks of students</h1>
<h3>Enter Marks of subjects of students</h3>
<form name="f1">
<br><br>1) English <input type="text" name="t1" required>
<br><br>2) Physics <input type="text" name="t2"required>
<br><br>3) Chemistry <input type="text" name="t3" required>
<br><br>4) Maths <input type="text" name="t4" required>
<br><br> 5) Biology <input type="text" name="t5" required>
<br><br> 6) IT <input type="text" name="t6" required>
<br><br><input type="submit" value="Calculate Average & print grade" onClick="calculate()">
</form>
<script>
function calculate()
{
var m1,m2,m3,m4,m5,m6,total=0,avg,grade;
m1=parseInt(f1.t1.value);
m2= parseInt (f1.t2.value);
m3= parseInt (f1.t3.value);
m4= parseInt (f1.t4.value);
m5= parseInt (f1.t5.value);
m6= parseInt (f1.t6.value);
total=(m1+m2+m3+m4+m5+m6);
avg=total/6;
alert("Average marks are:"+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';
}
else
{
grade='Fail';
}
alert ("Grade of the student is: "+ grade);
}
</script>
</body>
</html>
Output 1 :- Average.html
Output 1 :- Average.html
