Scribd
Upload
86 views

Event Based Programs

The document contains 10 JavaScript programs that use event-driven programming to perform various tasks. 1. The first program changes the background color of a document when a button is clicked. 2. The second program calculates the sum of the first 10 natural numbers and displays them when a button is clicked. 3. The third program displays the table of any given number when input and a button is clicked. 4. The remaining programs implement similar event-driven interactions to reverse numbers, display even numbers between ranges, calculate doubles, display images on mouseover, find greatest of 3 numbers, change background color on mouseover, and print a full name from inputs. The programs demonstrate using buttons, inputs, and

Uploaded by

Alpha College
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
86 views

Event Based Programs

The document contains 10 JavaScript programs that use event-driven programming to perform various tasks. 1. The first program changes the background color of a document when a button is clicked. 2. The second program calculates the sum of the first 10 natural numbers and displays them when a button is clicked. 3. The third program displays the table of any given number when input and a button is clicked. 4. The remaining programs implement similar event-driven interactions to reverse numbers, display even numbers between ranges, calculate doubles, display images on mouseover, find greatest of 3 numbers, change background color on mouseover, and print a full name from inputs. The programs demonstrate using buttons, inputs, and

Uploaded by

Alpha College
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Event based programs

1. Write a JavaScript program to change background color of document.

<html>
<head>
<script language="Javascript">
function col_chg()
{
document.bgColor="pink";
}
</script>
</head>
<body>
<form name=f1>
<input type="button" name="b1" value="color" onClick ="col_chg()">
</form>
</body>
</html>

2. Write a JavaScript to calculate the sum of first 10 natural nos using event driven program.

<html>
<head>
<script language="Javascript">
function nat_no()
{
var i,t;
t=0;
document.write("First ten natural numbers are:");
for(i=1;i<=10;i++)
{
t=t+i;
document.write("<br>"+i);
}
document.write("<br>");
document.write("Sum="+t);
}
</script>
</head>
<body>
<form name=f1>
<input type="button" name="b1" value="Natural nos" onClick ="nat_no()">
</form>
</body>
</html>

3. Write JavaScript event based program to display table of any given number.

<html>
<head>
<script language="Javascript">
function tabl()
{
var a;
a=document.x1.p1.value;
document.write("Table of ",a, ":");
for(i=1;i<=10;i++)
{
t=i*a;
document.write("<br>"+t);
}
}
</script>
</head>
<body>
<form name=x1>
Enter nay no: <input name=p1><br>
<input type="button" name="b1" value="Table" onClick ="tabl()">
</form>
</body>

Output
4. Write event driven JavaScript program to calculate the reverse of the given number.

<html>
<head>
<script language="Javascript">
function rv()
{
var n,r,s;
s=0;
n=document.x1.p1.value;
while(n!= 0)
{
r = n % 10;
s = s * 10 + r;
n = parseInt(n/10);
}
document.write("The reverse is " + s);

}
</script>
</head>
<body>
<form name=x1>
<input type="text" name="p1"> <br>
<input type="button" name="a" value="Find" onClick ="rv">
</form>
</body>
</html>

5. Write a event driven JavaScript code to display all even numbers between any two given
numbers.

<html>
<head>
<script language="Javascript">
function even_no()
{
var a,b,i;
a=parseInt(document.x1.p1.value);
b=parseInt(document.x1.p2.value);
document.write("Even nos betn ", a , " and ",b, " are : <br>");
for(i=a;i<=b;i++)
{
if(i % 2 == 0)
{
document.write("<br>"+i);
}
}

}
</script>
</head>
<body>
<form name=x1>
Enter 1st no: <input name=p1><br>
Enter 2nd no: <input name=p2><br>
<input type="button" name="b1" value="Even nos." onClick ="even_no()">
</form>
</body>
</html>

6. Write event driven JavaScript code to calculate double of the given number.

<html>
<head>
<script language="Javascript">
/*To calculate the double of any given no. */
function test_db()
{
document.write("Double: ", n1.value * 2);
}
</script>
</head>
<body>
<input type="text" name="n1"> <br>
<input type="button" name="a" value="Calculate" onClick ="test_db()">
</body>
</html>
7. Write a JavaScript code using mouse event so that by moving the mouse pointer over the text,
the image should display.

<html>
<head>
<title> JavaScript Program </title>
<script language = "JavaScript">
function imgload()
{
document.writeln('<img src="table.bmp">');
document.writeln("Welcome");
}
</script>
</head>
<body>
<a onMouseover="imgload();">Welcome olelearn</a>
</body>
</html>

8. Write a JavaScript program to find greatest no. from any three given nos.

<html>
<head>
<script language ="Javascript">
//JavaScript to find greatest no.
function test_gr()
{
a=n1.value;
b=n2.value;
c=n3.value;
document.write(“Greatest no. is ");
if(a>=b && a>=c)
{
document.write(a);
}
else
{
if(b>=a && b>=c)
{
document.write(b);
}
else
{
document.write(c);
}
}
}
</script>
</head>
<body>
Enter any three nos:
<br>
<input type="text" name="n1"> <br>
<input type="text" name="n2"> <br>
<input type="text" name="n3"> <br>
<input type="button" name="button1" value="Check" onClick = "test_gr()">
</body>
</html>

9. Write a JavaScript to change background color of the document by using mouseover event of
button.

<html>
<head>
<title> JavaScript Program </title>
<SCRIPT LANGUAGE = "JavaScript">
//Use of Mouseover and Mouseout event.
function test(col_nm)
{
document.bgColor=col_nm;
}
</SCRIPT>
</head>
<body>
<input type="button" name="p1" value="Red" onMouseover="test('green')"
onMouseout="test('black')">
<input type="button" name="p2" value="Blue" onMouseover="test('pink')"
onMouseout="test('green')">
</body>
</html>
10. Write a JavaScript script to accept the first, middle and last names of the user and print the
name.

<html>
<head>
<script language ="Javascript">
function p()
{
a=n1.value;
b=n2.value;
c=n3.value;
document.write("Name is: ",a +" "+ b+" "+c);
}
</script>
</head>
<body>
F_Name: <input type="text" name="n1"> <br>
M_Name: <input type="text" name="n2"> <br>
L_Name: <input type="text" name="n3"> <br>
<input type="button" name="button1" value="Join" onClick = "p()">
</body>
</html>

********************best of Luck****************************
Textual HTML programs

Just write HTML code

Que 1. Create frame using html which contains vertical two partitions

<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS = “400,*”>
<FRAME SRC = "f.html" NAME= "f1">
<FRAME SRC = "s.html" NAME= "f2">
</FRAMESET>
</HTML>

Que 2. Create frame using html which contains vertical two partitions (left & right). Also right partitions
should be divided into separate two horizontal partitions

<HTML>
<HEAD><TITLE>Nested Frame</TITLE></HEAD>
<FRAMESET COLS = '50%, *'>
<FRAME SRC = "f.html" NAME= "f1">
<FRAMESET ROWS = '50%, *'>
<FRAME SRC = "s.html" NAME= "f1">
<FRAME SRC = "t.html" NAME= "f2">
</FRAMESET>
</FRAMESET>
</HTML>
Que 3. Create frames using html which contains vertical two partitions (left & right). First partition must
contain hyperlink in which by clicking on that hyperlink related page should display in right partition.

Index.html

<HTML>
<FRAMESET COLS = "40%, *">
<FRAME NAME = "left" SRC = "Left.html">
<FRAME NAME = "r">
</FRAMESET>
</HTML>

Left.hml

<HTML>
<BODY>
<A HREF = "first.html" TARGET = "r">olelearn link 1 </A><P>
</BODY>
</HTML>
Que 4. Create frames using html which contains another frame.

<HTML>
<HEAD><TITLE>floating Frame</TITLE></HEAD>
<BOD
<H2>This is example of Inline frame.</H2>
<IFRAME SRC="I.html" ALIGN=Center HEIGHT=200 WIDTH=200 VSPACE=30
HSPACE=25 SCROLLING=Yes> </IFRAME>
</BODY>
</HTML>
Que 5 Design form for login screen which contains username and password fields.

<html>
<head>
<title>Form</title>
</head>
<body>
<form>
Username: <input type=text name=user><br>
Password: <input type=password name=pass>
<p>
<input type="submit" name="p1" value="Login">
</form>
</body>
</html>
Que 6. Design form using controls such as textbox, checkboxes, button.

<html>
<head>
<title> Form</title>
</head>
<body bgcolor="blue">
Name:<input type=text name=t1><br>
Value:<input type=text name=t2><p>
Checked:<input type=checkbox name=c1 value=chk><br>
Required <input type=checkbox name=c2 value=f><br>
Fields:<p>
<input type=button name=but1 value=Ok>
<input type=button name=but2 value=Cancel>
</body>
</html>

Que 7. Design form using fields: textbox, checkboxes, submit button, drop-down list.

<html>
<body bgcolor=red>
<form>
<input type=text name=t1 size=10>
<input type=submit name=s1 value=Srch><p>
<select name=m>
<option value=i25>25
<option value=i50>50
<option value=i100 selected>100
<option value=i200>200
</select>
Images Per Page<p>
<input type=checkbox name=c1 value=f checked>Royalty Free<br>
<input type=checkbox name=c2 value=m checked>Rights Managed
</form>
</body>
</html>
1. Write a JavaScript to calculate the sum of first 10 natural nos.

<html>
<head>
<title> Javascript program</title>
</head>
<body>
<script language= "JavaScript">
var i,t;
t=0;
document.write("First ten natural numbers are:");
for(i=1;i<=10;i++)
{
t=t+i;
document.write("<br>"+i);
}
document.write("<br>");
document.write("Sum="+t);

</script>
</body>
</html>

2. Write a JavaScript program to add all numbers in between any two given numbers.

<HTML>
<BODY>
<SCRIPT>
var m,n,i,sum;
s=0;
m=parseInt(prompt("Enter 1st no."));
n=parseInt(prompt("Enter 2nd no."));
for(i=a;i<=b;i++)
{
sum=sum+i;
}
document.write("Total=",sum);
</SCRIPT>
</BODY>
</HTML>
3. Write JavaScript program to display table of 5.

<html>
<body>
<script>
var i,tx;
t=0;
document.write("Table of 5:");
for(i=1;i<=10;i++)
{
t=i*5;
document.write("<br>"+tx);
}
</script>
</body>
</html>

4. Write JavaScript program to display table of any given number.

<html>
<body>
<script>
var i,a,t;
t=0;
a=parseInt(prompt("Enter any number"));
document.write("Table of ",a, ":");
for(i=1;i<=10;i++)
{
t=i*a;
document.write("<br>"+t);
}
</script>
</body>
</html>
5. Write JavaScript program to add all digits form given value. (for ex. 123 = 6)

<html>
<body>
<script language ="JavaScript">
var n,r,sum;
s=0;
n=prompt("Enter any number");
n1=n;
while(n!= 0)
{
r = n % 10;
sum = ssum + r;
n = parseInt(n/10);
}
document.write("Addition = " + sum);
</script>
</body>
</html>

6. Write JavaScript program to calculate the reverse of the given number.

<html>
<body>
<script language ="JavaScript">
var n,r,rev;
s=0;
n=prompt("Enter any number");
n1=n;
while(n!= 0)
{
r = n % 10;
rev = s * 10 + r;
n = parseInt(n/10);
}
document.write("The reverse of " + n1 + " is " + rev);
</script>
</body>
</html>
7. Write a JavaScript code to display even numbers between 0 to 20.

<HTML>
<HEAD>
<TITLE> Even Number </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("The even numbers between 0 to 10 are as follows");
for(i=0;i<=20;i++)
{
if(i % 2 == 0)
{
document.write("<br>"+i);
}
}
</SCRIPT>
</BODY>
</HTML>

8. Write a JavaScript code to display all odd numbers between any two given numbers.

<HTML>
<HEAD><TITLE> odd numbers </TITLE></HEAD>
<BODY>
<SCRIPT>
var x,y,i;
x=parseInt(prompt("Enter 1st no."));
y=parseInt(prompt("Enter 2nd no."));
document.write("Odd nos betn ", x , " and ",y, " are : <br>");
for(i=a;i<=b;i++)
{
if(i % 2 == 1)
{
document.write("<br>"+i);
}
}
</SCRIPT>
</BODY>
</HTML>
9. Write a JavaScript code to display all numbers in between 1 and 10 which are divisible by 4.
<HTML>
<BODY>
<SCRIPT>
var i;
for(i=1;i<=10;i++)
{
if(i % 4 == 0)
{
document.write("<br>"+i);
}
}
</SCRIPT>
</BODY>
</HTML>
10. Write a JavaScript code to display all numbers in between any two given numbers which are not
divisible by 5.

<HTML>
<BODY>
<SCRIPT>
var x,y,i;
x=parseInt(prompt("Enter 1st no."));
y=parseInt(prompt("Enter 2nd no."));
for(i=a;i<=b;i++)
{
if(i % 5 != 0)
{
document.write("<br>"+i);
}
}
</SCRIPT>
</BODY>
</HTML>
11. Write a JavaScript code to calculate sqr of the given number. (Event based)

<html>
<head>
<script language="Javascript">
/*To calculate the squre of any given no. */
function test()
{
document.write("square: ", n1.value * n1.value);
}
</script>
</head>
<body>
<input type="text" name="n1" value=0> <br>
<input type="button" name="a" value="Calculate" onClick ="test()">
</body>
</html>

12. Write a JavaScript code to accept a day and checks whether is a holiday or a working day.

<html>
<head>
<title> JavaScript Program </title>
</head>
<body>
<script language = "JavaScript">
day = prompt("Enter day:");
if(day=="sunday")
{
document.writeln("It is holiday");
}
else
{
document.writeln("It is working day");
}
</script>
</body>
</html>
13. Write a JavaScript code to calculate Fibonacci Series up to N terms. Where N is any given
number.

<html>
<head><title> Fibonacci Series </title>
</head>
<body>
<script language = "JavaScript">
var prv=1;
var nxt=1;
var n2=prompt("Enter last number");
document.write("Fibonacci Series:");
document.write("<br>"+a);
document.write("<br>"+b);
for(i=3;i<=n2;i++)
{
var nw=prv+nxt;
document.write("<br>"+nw);
prv=nxt;
nxt=nw;
}
</script>
</body>
</html>

14. Write a JavaScript code to calculate square and cube of the number.

<html>
<head>
</head>
<body>
<script language="Javascript">
/*To calculate the square and cube of any given no. */
var a;
a=prompt("Enter any number");
b=parseInt(a);
document.write("Square: ", b * b);
document.write("<br>");
document.write("Cube: ", b * b * b);
</script>
</body>
</html>
15. Write a JavaScript code using mouse event so that by moving the mouse pointer over the text,
the image should display.

<html>
<head>
<title> JavaScript Program </title>
<script language = "JavaScript">
function imgload()
{
document.writeln('<img src="t1.bmp">');
document.writeln("Welcome olelearn");
}
</script>
</head>
<body>
<a onMouseover="imgload();">Welcome olelearn</a>
</body>
</html>

16. Write a JavaScript to check whether the given text is number or not.

<html>
<head>
<body>
<script language ="javascript">
//how to Use of isNaN() function
var a,t;
t=0;
a=prompt("Enter any character");
t=isNaN(a);
if(t==false)
{
document.write("input value is number");
}
else
{
document.write("input value is not number");
}
</script>
</body>
</html>
17. Write a JavaScript to check whether the given no. is +ve or –ve or zero. (Mar-2004)

<html>
<head>
</head>
<body>
<script language ="Javascript">
//To check where the given no. is +ve or -ve or zero
var n;
n=prompt("Enter any number");
if(n>0)
{
document.write("+ve no.");
}
else
{
if(n<0)
{
document.write("-ve number.");
}
else
{
document.write("zero number.");
}
}
</script>
</body>
</html>

18. Write a JavaScript to display the following output.

*
**
***
****
*****
<html>
<head>
<title> sTAR </title>
</head>
<body>
<script language ="javascript">
Function star()
{
var i,j;
for(i=1;i<=5;i++)
{
for(j=1;j<=i;j++)
{
document.write('*');
}
document.write('<br>');
}
</script>

}
</head>
<body>
<a onClick()="star();">Welcome olelearn</a>
</body>
</html>

</body>
</html>
19. Write a JavaScript to display the following output.

1
12
123
1234
12345

<html>
<head>
<script language ="javascript">
{
Function trg()
{
var i,j;
for(i=1;i<=5;i++)
{
for(j=1;j<=i;j++)
{
document.write(j);
}
document.write(“<br>”);
}
</script>

<title> no trg </title>


</head>
<body>
<a onClick()="trg();">Welcome olelearn star click</a>

</body>

20. Write a JavaScript to display the following output.

1
22
333
4444
55555

</html>
<html>
<head>
<title> Output </title>
</head>
<body>
<script language ="javascript">
var i,j;
for(i=1;i<=5;i++)
{
for(j=1;j<=i;j++)
{
document.write(i);
}
document.write('<br>');
}
</script>
</body>
</html>

21. Write a JavaScript to display the following output.

*****
****
***
**
*

<html>
<head>
<title> Output </title>
</head>
<body>
<script language ="javascript">
var i,j;
for(i=1;i<=5;i++)
{
for(j=5;j>=i;j--)
{
document.write('*');
}
document.write('<br>');
}
</script>
</body>
</html>

22. Write a JavaScript to display the following output.

12345
1234
123
12
1
<html>
<head>
<title> Output Rev trg</title>
</head>
<body>
<script language ="javascript">
var i,j;
for(i=5;i>=1;i--)
{
for(j=1;j<=i;j++)
{
document.write(j);
}
document.write('<br>');
}
</script>
</body>
</html>

23. Write a JavaScript to display the following output.

*
**
***
****
*****
****
***
**
*
<html>
<head>
<title> Output </title>
</head>
<body>
<script language ="javascript">
var i,j;
for(i=1;i<=5;i++)
{
for(j=1;j<=i;j++)
{
document.write('*');
}
document.write('<br>');
}
for(i=2;i<=5;i++)
{
for(j=5;j>=i;j--)
{
document.write('*');
}
document.write('<br>');
}
</script>
</body>
</html>

24. Write a JavaScript to display the following output.

*****
****
***
**
*
**
***
****
*****
<html>
<head>
<title> Output </title>
</head>
<body>
<script language ="javascript">
var i,j;
for(i=1;i<=5;i++)
{
for(j=5;j>=i;j--)
{
document.write('*');
}
document.write('<br>');
}
for(i=2;i<=5;i++)
{
for(j=1;j<=i;j++)
{
document.write('*');
}
document.write('<br>');
}
</script>
</body>
</html>

You might also like