Scribd
Upload
139 views

SOP Javascript

Uploaded by

pawan.g7208
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
139 views

SOP Javascript

Uploaded by

pawan.g7208
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

SOP1 Javascript

<!--

Javascript SOP 1: Create a web page in HTML having a white background and two button objects. 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. When the second button
object is clicked, appropriate message should be displayed in Browsers 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 get loaded in the browser. There should at least be 7
differentand visibly distinct background colors. When the page is unloaded, the appropriate alert
message should be displayed. -->

<!doctype html>

<html>

<head>

<title> Background Colors

</title>

</head>

<body bgcolor="pink">

<h1 align="center"> 7 Different and Visibly distinct background colors </h1>

<form name="frm1">

<center>

<input type="button" name="btncolor" value="Change Colors" onMouseOver="f1()">

<input type="button" name="btnmsg" value="Message Display" onClick="dispaly()">

</form>

</body>

<script type="text/Javascript">
function f1()

document.bgColor="red";

window.setTimeout("f2()",1500);

function f2()

document.bgColor="green";

window.setTimeout("f3()",1500);

function f3()

document.bgColor="blue";

window.setTimeout("f4()",1500);

function f4()

document.bgColor="yellow";

window.setTimeout("f5()",1500);

function f5()

document.bgColor="aqua";

window.setTimeout("f6()",1500);

}
function f6()

document.bgColor="violet";

window.setTimeout("f7()",1500);

function f7()

document.bgColor="organge";

window.setTimeout("f8()",1500);

function f8()

document.bgColor="grey";

window.setTimeout("f1()",1500);

function dispaly()

window.status="Display of 7 different colors";

}
<!doctype html>

<html>

<head>

<title> Background Colors </title>

</head>

<body onLoad="f1()" onUnload="msg()">

<h1 align="center"> 7 Different and Visibly distinct background colors </h1>

</body>

<script type="text/Javascript">

function f1()

document.bgColor="red";

window.setTimeout("f2()",1500);

function f2()

document.bgColor="green";

window.setTimeout("f3()",1500);

function f3()

document.bgColor="blue";

window.setTimeout("f4()",1500);

}
function f4()

document.bgColor="yellow";

window.setTimeout("f5()",1500);

function f5()

document.bgColor="aqua";

window.setTimeout("f6()",1500);

function f6()

document.bgColor="violet";

window.setTimeout("f7()",1500);

function f7()

document.bgColor="organge";

window.setTimeout("f8()",1500);

function f8()

document.bgColor="grey";

window.setTimeout("f1()",1500);

}
function msg()

alert("Display of 7 different colors")

}
SOP2 Javascript

<!--

javascript SOP 2: 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 the end. It must contain at least one dot(.).

5) Make use of pattern attribute for email to accept lowercase, uppercase alphbets,

digits and specified symbols.

--->

<!doctype html>

<html>

<head>

<title> Validation of the form </title>

</head>

<body>

<form name="frm1">

Enter Name:

<input type="text" name="t1"> <br> <br>

Enter Address:

<input type="textarea" name="t2" placeholder="Permanant Address"> <br> <br>

Enter Telephone Number:


<input type="tel" maxlength="10"> <br> <br>

Enter Email Address:

<input type="email" name="t3" pattern="[A-Z a-z]{5}-[@]{1}-[.]{1}" placeholder="[email protected]">

<br> <br>

<input type="button" name="b1" value="Submit" onClick="chk()">

</form>

</body>

<script type="text/javascript">

function chk()

var x=frm1.t3.value;

var atpos=x.indexOf("@");

var lastat=x.lastIndexOf("@");

var firstdot=x.indexOf(".");

var dotpos=x.lastIndexOf(".");

if( atpos < 1 || dotpos < atpos + 2 >= x.length || firstdot < atpos || atpos < lastat )

alert("Not a valid email address");

frm1.t3.focus();

else

alert("Email address is accepted");


return true;

</script>

</html>
SOP3 javascript

<!---

Javascript SOP 3: Create event driven Javascript program for the following. Make use of appropriate

variables, Javascript inbuilt string functions and control structures. To string from user and count

number of vowels in the given strings

-->

<!doctype html>

<html>

<head>

<title> String functions </title>

</head>

<body bgcolor="pink">

<form name="frm1">

Enter Your Name:

<input type="text" name="t1" value=""> <br> <br>

<input type="button" name="btncheck" value="Count Vowels" onClick="cnt()">

</form>

</body>

<script type="text/javascript">

function cnt()

var s,i,ch,c;

c=0;

s=frm1.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>

</html>
SOP4 Javascrip

<!--

javascript SOP: 4

Create event driven Javascript program for the following. Make use

of appropriat variables, Javascript inbuilt functions and control

structures.

To accept string from user and reverse the given string and check

whether it is palindrome or not

-->

<!doctype html>

<html>

<head>

<title>Palindrome Checker</title>

</head>

<body bgcolor="pink">

<form name="frm1">

Enter any String:

<input type="text" name="t1" value=""><br><br>

<input type="button" name="btncheck" value="Check Palindrome" onclick="chk()">

</form>

<script type="text/javascript">

function chk() {

var a, s, i, n;
a = frm1.t1.value;

s = a.toLowerCase().replace(/[^a-z0-9]/gi, ''); // Remove non-alphanumeric characters

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>
SOP5 javascript

<!-- SOP5 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

45 Fahrenheit = 7.22222222 Celsius. -->

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Celcius to Fahrenhet</h2>

<p>Insert a number into one of the input fields below:</p>

<p><input id="c" onkeyup="convert('C')"> degrees Celsius</p>

<p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>

<p>Note that the <b>Math.round()</b> method is used, so that the result will be returned as an
integer.</p>

<script>

function convert(degree) {

var x;

if (degree == "C") {

x = document.getElementById("c").value * 9 / 5 + 32;

document.getElementById("f").value = Math.round(x);

} else {

x = (document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value = Math.round(x);

</script>

</body>

</html>
SOP6 javascript

<!-- 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. -->

<!doctype html>

<head>

<title> Average and Grade </title>

</head>

<body>

<form name="frm1">

Enter Marks of English: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<input type="number" name="t1" > <br> <br>

Enter Marks of Mathematics: &nbsp &nbsp

<input type="number" name="t2" > <br> <br>

Enter Marks of Physic: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<input type="number" name="t3" > <br> <br>

Enter Marks of Chemistry: &nbsp &nbsp &nbsp &nbsp

<input type="number" name="t4" > <br> <br>

Enter Marks of Biology: &nbsp &nbsp &nbsp &nbsp

&nbsp &nbsp

<input type="number" name="t5" > <br> <br>


Enter Marks of IT: &nbsp &nbsp&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<input type="number" name="t6" > <br> <br>

<input type="button" name="btnclick" value="Print Grade" onclick="grade()">

</form>

</body>

<script type="text/javascript">

function grade()

var m1,m2,m3,m4,m5,m6,a;

m1=parseFloat(frm1.t1.value);

m2=parseFloat(frm1.t2.value);

m3=parseFloat(frm1.t3.value);

m4=parseFloat(frm1.t4.value);

m5=parseFloat(frm1.t5.value);

m6=parseFloat(frm1.t6.value);

a=m1+m2+m3+m4+m5+m6;

alert(a)

var b= a/6;

alert("Average Marks of Student is :" +b);

if(a>91)

alert("Grade A");

else

{
if(a>81)

alert("Grade is B");

else

if(a>71)

alert("Grade is C");

else

if(a>61)

alert("Grade is D");

else

alert("Grade is F");

</script>

<html>

You might also like