Scribd
Upload
155 views

Javascript Sop 1 to Sop 7

Uploaded by

kaiprinceyadav2006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
155 views

Javascript Sop 1 to Sop 7

Uploaded by

kaiprinceyadav2006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

JAVASCRIPT SOP 1 TO 7

Sop1:

1st page:-

<!DOCTYPE html>

<html>
<head>
<title>Sop 1 Javascript</title>
</head>
<body>
<script type="text/Javascript">
var colors= new Array("olive green","plum", "aquamarine",
"cyan","dimgray", "wheat", "yellow");
var i=0;
function changeColor()
{
document.body.style.backgroundColor= colors[i];
i++;
if(i>colors.length)
{
i=0;
}
window.setTimeout("changeColor()",1000);
}
</script>
<form>
<input type="button" name="btn_color" value="Change Colors"
onmouseover="changeColor()">
</form>
</body>
</html>

2nd page:-
<!DOCTYPE html>
<html>
<head>
<title>Sop 1 Javascript 1st page</title>
</head>
<body onload="changeColor()">
<script type="text/Javascript">
var colors= new Array("salmon","lightpink", "lightgreen",
"skyblue","lightyellow", "lavender", "tan");
var i=0;
function changeColor(){
document.body.style.backgroundColor= colors[i];
i++
if(i>colors.length)
{
i=0;
}
window.setTimeout("changeColor()",1000);
}
</script>
</body>
</html>
Sop 2:-
<!DOCTYPE html>
<html>
<head>
<title>Sop 2 JavaScript</title>
</head>
<body>
<h1>Information Form</h1>

<form name="f1">
Your Name
<input type="text" name="txt_name">
<br>
<br>

Address
<textarea name="txt_address" placeholder="Permanent Address"/></textarea>
<br>
<br>

Contact
<input type="tel" name="telephone" maxlength="10">
<br><br>

Email
<input type="email" name="txt_email" pattern="[A-Z a-z]{0-9}-[@]{1}-[.]{1}">
<br>
<br>

<input type="button" name="b1" value="submit" onclick="validate_email()">


</form>
</body>

<script type="text/javascript">
function validate_email()
{
var x=f1.txt_email.value;
var at_pos=x.indexOf("@");
var last_pos=x.lastIndexOf("@");
var firstdot_pos=x.indexOf(".");
var dot_pos=x.lastIndexOf(".");
if(at_pos<1||dot_pos<at_pos+2||dot_pos+2>=x.length||firstdot_pos<at_pos||a
t_pos<last_pos)
{
alert("Not an Valid email address");
f1.txt_email.focus();
}
else
{
alert("Valid Email Address");
return true;
}
}

</script>
</html>
Sop 3:-
<!DOCTYPE html>
<html>
<head>
<title>Sop 3 Javascript 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="btn_checkvowel" value="Click to count"
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 is: "+counter);
}
</script>
</body>
</html>
Sop 4:-
<!DOCTYPE html>
<html>
<head>
<title>JavaScript SOP 4 Example</title>
</head>
<body>
<form name="f1">
Enter the string to check it is palindrome or not!
<br>
<input type="text" name="t1">
<br>
<br>
<input type="button" name="check_palin" value="Check String"
onclick="chk_palindrome()">
</form>
<script type="text/javascript">
function chk_palindrome()
{
var str,str_case,i,len;
str=f1.t1.value;
str_case=str.toLowerCase();
len=str_case.length;
var p=1;
for(i=0;i<len/2;i++)
{
if(str_case.charAt(i)!=str_case.charAt(len-1-i))
{
p=0;
break;
}
}
if(p==1)
{
alert("Entered string is Palindrome");
}
else
{
alert("Entered string is Not a Palindrome")
}

}
</script>

</body>
</html>
Sop 5:-
<!DOCTYPE html>
<html>
<head>
<title>Javascript Sop 5</title>
<body>
<h2>Javscript code to Convert Celsius to Fahrenheit</h2>
<p>Enter the Temperature:-</p>
<p><input type="text" id="txt_celsius"
onkeyup="convert('C')">Temperature in degree Celsius</p>
<p><input type="text" id="txt_fah" onkeyup="convert('F')">Temperature
in degree Fahrenheit</p>
</body>
</head>
<script type="text/Javascript">
function convert(temperature)

var t;

if(temperature=="C")

{
t=document.getElementById("txt_celsius").value*9/5+32;
document.getElementById("txt_fah").value=Math.round(t);

}
else
{
t=(document.getElemntById("txt_fah").value-32)*5/9;
document.getElementById("txt_celsius").value=t;
}
}
</script>
</html>
Sop 6:-
<!DOCTYPE html>
<html>
<head>
<title>Javascript Sop 6</title>
</head>
<body>
<h1>Javscript program to compute average marks of students</h1>
<form name="form1">
<p>Enter Marks of Each Subject</p>
<br>
English marks=
<input type="text" name="txt_eng">
<br><br>
Physics Marks=
<input type="text" name="txt_phy">
<br><br>
Chemistry Marks=
<input type="text" name="txt_chem">
<br><br>
IT Marks=
<input type="text" name="txt_it">
<br><br>
Maths Marks=
<input type="text" name="txt_maths">
<br><br>
Biology Marks=
<input type="text" name="txt_bio">
<br><br>
<input type="submit" value="Calculate Average Marks"
onclick="calculate_grade()">
</form>
<script type="text/Javascript">
function calculate_grade(){ var
m1,m2,m3,m4,m5,m6,avg;
m1=parseInt(form1.txt_eng.value);
m2=parseInt(form1.txt_phy.value);
m3=parseInt(form1.txt_chem.value);
m4=parseInt(form1.txt_it.value);
m5=parseInt(form1.txt_maths.value);
m6=parseInt(form1.txt_bio.value);
avg=(m1+m2+m3+m4+m5+m6)/6;
alert("Average marks of student 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){
garde='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>
</body>
</html>
Sop 7:-
<!DOCTYPE html>
<html>
<head>
<title>Sop 7 JavaScript</title>
</head>
<body>
<h2> This is an example of getting the difference between two dates using
JavaScript.</h2>
<script type="text/JavaScript">
function chk() {
var d1 = new Date(document.f1.t1.value);
var d2 = new Date(document.f1.t2.value);
var diff = d2.getTime() - d1.getTime();
var daydiff = diff / (1000 * 60 * 60 * 24);
document.write("<b>Your Date of Birth is:</b> " +d1);
document.write("<br>"); document.write("<b>Today's Date is:</b> "
+d2);
document.write("<br>"); document.write("<b>The difference between
to dates is:</b> " +daydiff+""+"days");
}
</script>
<form name="f1"> Enter your Date of Birth :
<input type="date" name="t1"><br> Enter your Today's Date :
<input type="date" name="t2"><br>
<input type="button" value="Display Date Difference" onClick="chk()">
</form>
</body>
</html>

You might also like