Scripts Examples-03

Script for Addition
<html>
<body>
<script language="javascript">
var a=prompt("Enter first number");
var b=prompt("enter second number");
var c = parseInt(a) + parseInt(b);
alert ('the result is : ' + c);
document.write("Sum of " + a + " and " + b + " is " + c);
</script>
</body>
</html>
Script for Addition
<html>
<head>
function addition()
{
f1.t3.value=parseInt(f1.t1.value) + parseInt(f1.t2.value);
}
</script> </head>
<body>
<form name="f1">
Number 1 : <input type="text" name="t1"> <br>
Result : <input type="text" name="t3"> <br>
<input type=button value="Add" onclick="addition();">
</form>
</body>
</html>
Various Arithmetic operations using Script
<html>
<head>
function addition()
{
f1.t3.value=parseInt(f1.t1.value) + parseInt(f1.t2.value);
}
function sub()
{
f1.t3.value=parseInt(f1.t1.value) - parseInt(f1.t2.value);
}
function mul()
{
f1.t3.value=parseInt(f1.t1.value) * parseInt(f1.t2.value);
}
function div()
{
f1.t3.value=parseInt(f1.t1.value) / parseInt(f1.t2.value);
}
</script>
Various Arithmetic operations using Script
</head>
<body>
<form name="f1">
Result : <input type="text" name="t3"> <br>
<input type=button value=" Add " onclick="addition();">
<input type=button value=" Sub " onclick="sub();">
<input type=button value=" Mul " onclick="mul();">
<input type=button value=" Div " onclick="div();">
</form>
</body>
</html>
JavaScript for biggest of 2 numbers
<html>
<body>
var a = prompt("Enter the I number ");
var b= prompt ("Enter the II number");
document.write(a + "<br>");
document.write(b + "<br>");
if(a>b)
document.write("Biggest number is " + a + "<br>");
else
</script>
</body>
</html>
JavaScript for biggest of 3 numbers
<html>
<body>
var a = prompt("Enter the I number ");
var b= prompt ("Enter the II number");
var c=prompt("Enter the III number");
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
if((a>b) && (a>c))
else if(b>c)
document.write("Biggest number is " + b + "<br>");
else
document.write("Biggest number is " + c + "<br>");
</script>
</body>
</html>
JavaScript for factorial of a number
<html>
<body>
var n = prompt("Enter a number");
var f = 1;
for(i=1;i<=n;i++)
f = f * i;
document.write("Factorial of " + n + " is " + f);
</script>
</body>
</html>
JavaScript for printing student marklist in html table
<html>
<body>
var n = prompt("No. of students");
sname = new Array(10);
regno=new Array(10);
m1=new Array(10);
m2=new Array(10);
m3 = new Array(10);
total = new Array(10);
for(i=1;i<=n;i++)
{
regno[i] = prompt("Enter regno" + " of " + "Student " + i );
sname[i] = prompt("Enter Name" + " of " + "Student " + i );
m1[i] = prompt("Enter m1" + " of " + "Student " + i );
total[i]=parseInt(m1[i]) + parseInt(m2[i]) +parseInt(m3[i]);
}
JavaScript for printing student marklist in html table
document.write("<b> Student Details </b><br>");
document.write("<table border=2> <tr> <th> RegNo <th> Name <th> M1 <th> M2 <th> M3
<th> Total </tr>");
for(i=1;i<=n;i++)
{
document.write("<tr> <td> " + regno[i]);
document.write("<td> " + sname[i]);
document.write(" <td> " + m1[i] );
document.write(" <td> " + total[i] );
document.write("</tr>");
}
</script>
</body>
</html>
Script to change content of Statusbar
<html>
<head> <title> Changing the Status Bar </title>
<script Language = “JavaScript”>
function msg(text)
{ window.status = text; }
</script>
</head>
<body>
<h2> Manipulating Text in the Status Bar. </h2>
<a href=http://www.yahoo.com
onMouseOver=“msg(‘Click here for Yahoo!’); return true;”
onMouseOut = “msg(‘ ’); return true;”
</a>
</body>
</html>
Event Handlers in JavaScript
EVENT HANDLER USED WITH

onAbort image
onBlur select, text, text area
onChange select, text, textarea
onClick button, checkbox, radio, link, reset, submit, area
onError image
onFocus select, text, textarea
onLoad windows, image
onMouseOut link, area
onMouseOver link, area
onSelect text, textarea
onSubmit form
onUnload window
Example for onLoad Event handler
• An onLoad event occurs when a window or image finishes loading
<HTML>
<HEAD>
<TITLE>Example of onLoad Event Handler</TITLE>
<SCRIPT>
function hello() {
alert("Hello there...\n\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>
Example for onFocus Event handler
• An onFocus Event Handler executes JavaScript code when input focus
enters the field either by tabbing in or by clicking but not selecting input
from the field.
<HTML>
<HEAD><TITLE>Example of onFocus Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onFocus Event Handler</H3>
Click your mouse in the text box:<BR>
<FORM>
<INPUT TYPE="text" onFocus='alert("You focused in the textbox!!")'>
</FORM>
</BODY>
</HTML>
onBlur Event handler
• An onBlur Event Handler executes JavaScript code when input focus leaves the field of a text,
textarea, or a select option.
• For windows, frames and framesets the Event Handler executes JavaScript code when the
window loses focus.
• Example
<HTML>
<HEAD>
<TITLE>Example of onBlur Event Handler</TITLE>
<SCRIPT>
function validate(value) {
if (value < 0) alert("Please input a value that is greater or equal to 0");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onBlur Event Handler</H3>
Try inputting a value less than zero:<BR>
<FORM>
<INPUT TYPE="text" onBlur="validate(this.value)">
</FORM>
</BODY>
</HTML>
onChange Event handler
• The onChange Event Handler executes JavaScript code when input focus exits the
field after the user modifies its text.
• Example
<HTML>
<HEAD>
<TITLE>Example of onChange Event Handler</TITLE>
<SCRIPT>
function valid(input) {
alert("You have changed the value from 10 to " + input);
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onChange Event Handler</H3>
Try changing the value from 10 to something else:<BR>
<FORM>
<INPUT TYPE="text" VALUE="10" onChange="valid(this.value)">
</FORM>
</BODY>
</HTML>
onClick Event handler
• In an onClick Event Handler, JavaScript function is called when an object in a
button (regular, radio, reset and submit) is clicked, a link is pushed, a checkbox is
checked or an image map area is selected.
• Example ( Refer the addition program)
onMouseOver:
• JavaScript code is called when the mouse is placed over a specific link or an object
or area from outside that object or area.
onMouseOut:
• JavaScript code is called when the mouse leaves a specific link or an object or area
from outside that object or area.
• Example ( Refer the program of change the content of Statusbar)
onSelect:
• A onSelect Event Handler executes JavaScript code when the user selects some of
the text within a text or textarea field.
• Example:
<HTML>
<HEAD><TITLE>Example of onSelect Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onSelect Event Handler</H3>
Select the text from the text box:<br>
<FORM>
<INPUT TYPE="text" VALUE="Select This"
onSelect="alert('This is an example of onSelect!!')">
</FORM>
</BODY>
</HTML>
Applet program to perform various Arithmetic operations
import java.applet.*;
import java.awt.event.*;
import java.awt.*;
public class calc extends Applet implements ActionListener{
TextField tf1, tf2, tf3;
Label l1,l2,l3;
String Add, Subtract,Multiply,Divide;
public void init(){
tf1 = new TextField(10);
tf2 = new TextField(10);
tf3 =new TextField(10);
l1 = new Label("Number 1");
l2 = new Label("Number 2");
l3 = new Label("Result");
add(l1); add(tf1);
add(l2); add(tf2);
add(l3); add(tf3);
Button b = new Button("Add");
Button c = new Button("Subtract");
Button d = new Button("Multiply");
Button e = new Button("Divide");
b.addActionListener(this);
c.addActionListener(this);
d.addActionListener(this);
e.addActionListener(this);
add(b); add(c);
add(d); add(e);
}
public void actionPerformed(ActionEvent e)
{
String s=e.getActionCommand();
int n1 = Integer.parseInt(tf1.getText());
int n2 = Integer.parseInt(tf2.getText());
if(s=="Add")
tf3.setText(String.valueOf(n1+n2));
if(s=="Subtract")
tf3.setText(String.valueOf(n1-n2));
if(s=="Multiply")
tf3.setText(String.valueOf(n1*n2));
if(s=="Divide")
tf3.setText(String.valueOf(n1/n2));
}
}
Client – Side ImageMap Example
//home.html
<frameset rows=15%,85%>
<frame src="title.html">
<frameset cols=40%,60%>
<frame src="map.html">
<frame name="content">
</frameset>
</frameset>

//title.html
<html>
<head>
<body>
<font color=blue>
<center><h1>INDIA</h1>
</center>
</font>
</body> </html>
//map.html
<html>
<body>
<img src="C:\Documents and Settings\Babu\My Documents\My
Pictures\indiamap.gif" height=400 width=400 usemap="#IndiaMap">
<map name="Indiamap">
<area shape="circle" coords="120,140,10"alt="Delhi" href="delhi.html"
target=content>
<area shape="circle" coords="200,200,10"alt="kolkatta" href="kolkatta.html"
target=content>
<area shape="circle" coords="170,300,10"alt="chennai" href="chennai.html"
target=content>
<area shape="circle" coords="70,250,10"alt="mumbai" href="mumbai.html"
target=content>
</body>
</html>

•
• //delhi.html
<html>
<head>
<title>Delhi Deatails</title>
</head>
<body>
<font color=green face=arial>
<h3><center>Delhi Details</center></h3>
<p>Delhi,the national capital is the hub of touism in north india.
Delhi is an important states in india as most of the administrative offices arelocated here.
The state is provided with almost everything that atourist is looking for.
It has monuments,parks and gardens,markets,hostels,clubs,pubs and
bars,discothques,food and festivals,state administrative offices and foreign offices.
Delhi has an extreme climate with temperature touching the 45 C mark in summers.
It is recommended to visit the state between october and march</p>
</font>
</body>
</html>

//kolkatta.html
<html>
<head>
<title> kolkata details</title>
</head>
<body>
<h2><center>Details about kolkatta</center><h2>
<font color=pink face=arial>
<p> Kolkata, the former capital of India presents the cultureal splendor of the east.
The city bears the impressions of the historical landmarks set by some of the
greatest reformers of India.<l1>kolkata is the largest metropolitan city of India. the city
is also home to a great population, about 13 million. Kolkata is the birth place of some of
the
legendary people of India like Rabindranath Tagore, Swami Vivekananda, Subhash Chandra
Bose</p>
</font>
</body>
</html>

Scripts Examples-03

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Scripts Examples-03

Uploaded by

Copyright:

Available Formats

Script for Addition

var a=prompt("Enter first number");

var b=prompt("enter second number");

var c = parseInt(a) + parseInt(b);

alert ('the result is : ' + c);

document.write("Sum of " + a + " and " + b + " is " + c);

EVENT HANDLER USED WITH

You might also like