From our HTML tutorial we have
learned that an image-map is an image with clickable regions. Normally, each
region has an associated hyperlink. Clicking on one of the regions takes you to
the associated link. Look at our
simple HTML image-map.
Adding some JavaScript
We can add events (that can call a
JavaScript) to the <area> tags inside the image map. The <area> tag
supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver,
onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur
events.
Here's the HTML image-map example,
with some JavaScript added:
Example
|
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src="planets.gif" width="145"
height="126"
alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter
are by far the largest objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun"
/>
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very difficult to study
from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was often considered a
twin sister to the Earth because Venus is the nearest planet to us, and
because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
|
|
JavaScript Timing Events
|
1
2
3
4
5
6
7
8
9
10
11
12
|
|
|
JavaScript can
be executed in time-intervals.
This is called
timing events.
|
JavaScript Timing Events
With JavaScript, it is possible to
execute some code after a specified time-interval. This is called timing
events.
It's very easy to time events in
JavaScript. The two key methods that are used are:
- setTimeout() - executes a code
some time in the future
- clearTimeout() - cancels the
setTimeout()
Note: The setTimeout() and clearTimeout() are
both methods of the HTML DOM Window object.
The setTimeout() Method
Syntax
|
var t=setTimeout("javascript statement",milliseconds);
|
The setTimeout() method returns a
value - In the statement above, the value is stored in a variable called t. If
you want to cancel this setTimeout(), you can refer to it using the variable
name.
The first parameter of
setTimeout() is a string that contains a JavaScript statement. This statement
could be a statement like "alert('5 seconds!')" or a call to a
function, like "alertMsg()".
The second parameter indicates how
many milliseconds from now you want to execute the first parameter.
Note: There are 1000 milliseconds in one second.
Example
When the button is clicked in the
example below, an alert box will be displayed after 5 seconds.
Example
|
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()" />
</form>
</body>
</html>
|
|
Example - Infinite Loop
To get a timer to work in an
infinite loop, we must write a function that calls itself.
In the example below, when a
button is clicked, the input field will start to count (for ever), starting at
0.
Notice that we also have a
function that checks if the timer is already running, to avoid creating
additional timers, if the button is pressed more than once:
Example
|
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>
|
|
The clearTimeout() Method
Syntax
|
clearTimeout(setTimeout_variable)
|
Example
The example below is the same as
the "Infinite Loop" example above. The only difference is that we
have now added a "Stop Count!" button that stops the timer:
Example
|
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!"
onClick="stopCount()">
</form>
</body>
</html>
|
|
JavaScript Timing Events
|
1
2
3
4
5
6
7
8
9
10
11
12
|
|
|
JavaScript can
be executed in time-intervals.
This is called
timing events.
|
JavaScript Timing Events
With JavaScript, it is possible to
execute some code after a specified time-interval. This is called timing
events.
It's very easy to time events in
JavaScript. The two key methods that are used are:
- setTimeout() - executes a code
some time in the future
- clearTimeout() - cancels the setTimeout()
Note: The setTimeout() and clearTimeout() are
both methods of the HTML DOM Window object.
The setTimeout() Method
Syntax
|
var t=setTimeout("javascript statement",milliseconds);
|
The setTimeout() method returns a
value - In the statement above, the value is stored in a variable called t. If
you want to cancel this setTimeout(), you can refer to it using the variable
name.
The first parameter of
setTimeout() is a string that contains a JavaScript statement. This statement
could be a statement like "alert('5 seconds!')" or a call to a
function, like "alertMsg()".
The second parameter indicates how
many milliseconds from now you want to execute the first parameter.
Note: There are 1000 milliseconds in one second.
Example
When the button is clicked in the
example below, an alert box will be displayed after 5 seconds.
Example
|
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()" />
</form>
</body>
</html>
|
|
Example - Infinite Loop
To get a timer to work in an
infinite loop, we must write a function that calls itself.
In the example below, when a
button is clicked, the input field will start to count (for ever), starting at
0.
Notice that we also have a
function that checks if the timer is already running, to avoid creating
additional timers, if the button is pressed more than once:
Example
|
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>
|
|
The clearTimeout() Method
Syntax
|
clearTimeout(setTimeout_variable)
|
Example
The example below is the same as
the "Infinite Loop" example above. The only difference is that we
have now added a "Stop Count!" button that stops the timer:
Example
|
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!"
onClick="stopCount()">
</form>
</body>
</html>
|
|
JavaScript Timing Events
|
1
2
3
4
5
6
7
8
9
10
11
12
|
|
|
JavaScript can
be executed in time-intervals.
This is called
timing events.
|
JavaScript Timing Events
With JavaScript, it is possible to
execute some code after a specified time-interval. This is called timing
events.
It's very easy to time events in
JavaScript. The two key methods that are used are:
- setTimeout() - executes a code
some time in the future
- clearTimeout() - cancels the
setTimeout()
Note: The setTimeout() and clearTimeout() are
both methods of the HTML DOM Window object.
The setTimeout() Method
Syntax
|
var t=setTimeout("javascript statement",milliseconds);
|
The setTimeout() method returns a
value - In the statement above, the value is stored in a variable called t. If
you want to cancel this setTimeout(), you can refer to it using the variable
name.
The first parameter of
setTimeout() is a string that contains a JavaScript statement. This statement
could be a statement like "alert('5 seconds!')" or a call to a
function, like "alertMsg()".
The second parameter indicates how
many milliseconds from now you want to execute the first parameter.
Note: There are 1000 milliseconds in one second.
Example
When the button is clicked in the
example below, an alert box will be displayed after 5 seconds.
Example
|
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()" />
</form>
</body>
</html>
|
|
Example - Infinite Loop
To get a timer to work in an
infinite loop, we must write a function that calls itself.
In the example below, when a
button is clicked, the input field will start to count (for ever), starting at
0.
Notice that we also have a
function that checks if the timer is already running, to avoid creating additional
timers, if the button is pressed more than once:
Example
|
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>
|
|
The clearTimeout() Method
Syntax
|
clearTimeout(setTimeout_variable)
|
Example
The example below is the same as
the "Infinite Loop" example above. The only difference is that we
have now added a "Stop Count!" button that stops the timer:
Example
|
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!"
onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!"
onClick="stopCount()">
</form>
</body>
</html>
|
|
JavaScript Form Validation
JavaScript Form Validation
JavaScript can be used to validate
data in HTML forms before sending off the content to a server.
Form data that typically are
checked by a JavaScript could be:
- has the user left required
fields empty?
- has the user entered a valid
e-mail address?
- has the user entered a valid
date?
- has the user entered text in a
numeric field?
Required Fields
The function below checks if a
required field has been left empty. If the required field is blank, an alert
box alerts a message and the function returns false. If a value is entered, the
function returns true (means that data is OK):
|
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
|
The entire script, with the HTML
form could look something like this:
|
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled
out!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return
validate_form(this)" method="post">
Email: <input type="text" name="email"
size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
|
E-mail Validation
The function below checks if the
content has the general syntax of an email.
This means that the input data
must contain at least an @ sign and a dot (.). Also, the @ must not be the
first character of the email address, and the last dot must at least be one
character after the @ sign:
|
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
|
The entire script, with the HTML
form could look something like this:
|
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail
address!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return
validate_form(this);" method="post">
Email: <input type="text" name="email"
size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
|
Javascript examples
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click
me!" onClick="displaymessage()" />
</form>
<p>By pressing the button above, a function will be
called. The function will alert a message.</p>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function funName(n)
{
txt=n.value;
if(txt.length<6)
{
alert("please
enter the min. 6 characters ");
}
}
function funTel(n)
{txt=n.value;
if(txt.length<10)
{
alert("please
enter the min. 10 numbers ");
}
}
function funMTel(n)
{
txt=n.value;
if(txt.length<10)
{
alert("please
enter the min. 10 numbers ");
}
}
function funMail(n)
{
txt=n.value;
if(txt.indexOf('@')==-1
&& txt.indexOf('.')==-1)
{
alert("please
enter @ sign or .sign");
}
}
function funpassword(n)
{
txt=n.value;
if(txt.length<6)
{
alert("please
enter the min. 6 characters ");
}
}
</script>
<title> my home page</title>
</head>
<body background="images/ss.jpg"
text="#000000">
<form action="show.php"
name="registration" method="post">
<h1><center>
Registration form
</center></h1>
<HR WIDTH="75%" COLOR="#FF0000"
SIZE="4">
<tr><th><p>Personal information</p>
<p> </p></th>
</tr>
<tr><td>Name</td><td><input
name="name" input type="text" value=""
onblur="funName(this)"></td></tr>
<tr><td>Father's Name</td><td><input
name="fathername"
type="text" value=""
onBlur="funName(this)"></td></tr>
<tr><td>address</td><td><input
type="text" input name="address" value=""
onBlur="funName(this)"></td></tr></br>
<tr><td>teleno.</td><td><input
type="text" input name="teleno" value=""
maxlength="10"
onBlur="funTel(this)"></td></tr>
<tr><td>mobile no.</td><td><input
type="text" input name="mobileno" value=""
maxlength="10" onBlur="funMTel(this)"
></td></tr>
<tr>
<td>Email Id:
</td>
<td><INPUT
name="email" input type="text" value=""
size="10" onBlur="funMail(this)"></td></tr>
<tr>
<td>Password:</td>
<td><input
name="password" input type="password" value=""
size="10"
onBlur="funpassword(this)"></td></tr>
<tr> <td>Re enter Password:</td>
<td><input
name="repassword" input type="password" value=""
size="10"></td></tr>
<input type="submit"
name="submit"
value="Submit"/>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt);
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction('Good Morning!')"
value="In the Morning">
<input type="button"
onclick="myfunction('Good Evening!')"
value="In the Evening">
</form>
<p>
When you click on one of the buttons, a function will be called.
The function will alert
the argument that is passed to it.
</p>
</body>
</html>
// JavaScript Document<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your
name","harry poter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you
today?");
document.write("i am fine... , how r uu.");
}
}
</script>
</head>
<body>
<input type="button"
onClick="show_prompt()" value="Show a prompt box" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start
count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will
count for ever, starting at 0.</p>
</body>
</html>
<html>
<body>
<script type="text/javascript">
document.write(Math.random());
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
document.write(Date());
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button"
onClick="show_confirm()" value="Show a confirm box" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt);
}
</script>
</head>
<body>
<form>
<input type="button"
onClick="myfunction('Hello')" value="Call function">
</form>
<p>By pressing the button above, a function will be
called with "Hello" as a parameter. The function will alert the
parameter.</p>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start
count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop
count!" onClick="stopCount()">
</form>
<p>
Click on the "Start count!" button above to start
the timer. The input field will count forever, starting at 0. Click on the
"Stop count!" button to stop the counting.
</p>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onLoad="startTime()">
<div id="txt"></div>
</body>
</html>
