[go: up one dir, main page]
Scribd
Upload
95 views28 pages

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
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
95 views28 pages

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
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/ 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